Create a new event to fire tags on

Another use case for the data layer is to create a new event that could fire tags, as an extension of the trigger mechanism. Normally, you would be constrained to one of the predefined trigger types like a page view, click or form submit trigger.

Pushing a new event to the data layer lets you use the event trigger. This helps you to define more precisely when to fire a tag. For example, you could create a new event when a user finishes watching a video and then show a pop-up to this user.

To create a new event you need to push into data layer a new object with the event key, like here:

<script>dataLayer.push({‘event’: ‘custom_event_name’});</script>

The custom_event_name is just a name of your custom event, for example video ended.

This feature is especially powerful when used within callbacks for button clicks or AJAX requests.

<script>document.getElementById(‘product-selected’).onclick = function () {dataLayer.push({‘event’: ‘product-selected’});}</script>

Use custom data layer events as a trigger for tag

To configure tag to fire on custom event you should add an event trigger. Make sure the event name matches the one that you pushed into data layer.

For example, this trigger will fire a tag when product-selected event is pushed into data layer.

A product-selected trigger.

Fire a tag after a video has ended

This example will show an alert in response to a custom event called videoEnded. To run, save the following code as an HTML file and insert your container's code in a required page section.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>PiwikPRO Tag Manager - data layer event example</title>
</head>
<body>
  <!-- Add Piwik PRO Tag Manager code here --> <video id="myVideo" width="400" controls>
    <source src="video.mp4" type="video/mp4"> </video>
  <script>
    var video = document.getElementById("myVideo");
    video.onended = function() {
      window.dataLayer.push({
        event: 'videoEnded'
      });
    };
  </script>
</body>
</html>

Here is an example of a trigger with this event:

A video-ended trigger.
Was this article helpful?

Be the first to rate this article.

Technical Support

If you have any questions, drop us a line at support_SPC@piwik_SPC.pro.

We’re happy to help!