Anytime you need to start tracking a new type of event, the following setup can be used. Later sections describe specific events to be tracked on roll-put, this section describes how to track events that will be added later, with as little work as possible.

Naming convention

The event pushes should be consistent in naming across all P4 sites, that makes it easier to benchmark and compare.

Please follow these guidelines when setting up events in P4 GTM container:

 

 


Understand Events

The “Generic” event is applicable to any new event you need to set up! Just customize the sections in italic in the code below.

Sending an event to the dataLayer, using the push function, will only overwrite previous values of the dataLayer if something new is being pushed. Using the following dataLayer.push, we can track any, and as many events on a single page as we like.

//Descriptive name of Event being tracked
window.dataLayer = window.dataLayer || [];
 dataLayer.push({
 'event' : 'uaevent' //do not alter this name
 'eventCategory' : '[variable]' //The Event Category to be sent to GA
 'eventAction' : '[variable]' //The Event Action
 'eventLabel' : '[variable]' //Optional, could be current URL
 });

This dataLayer.push corresponds to a setup of a Tag, Trigger and four Variables in GTM, which will be used to send this data into GTM. The Tag has the following configuration:

Category {{DLV – eventCategory}}
Action {{DLV – eventAction}}
Label {{DLV – eventLabel}}
Name UA – Generic Event Tag
Triggers Custom event = uaevent

 


Newsletter signup (Action alert)

This push should be executed when a user successfully sign up via the submission form on the Block: Happy point.\

If we are using Engaging Networks for both Petitions and Happy point, we can include the Action alert in the Petition Signup Tag (above), just by adding a Custom Variable:

Insert these values in the Variable Configuration (adapt the example below if necessary):

Input Output
.*petition.* Petition Signup
.*subscribe.* Action Alert

 

This push should look like this:

// Newsletter signup
window.dataLayer = window.dataLayer || [];
 dataLayer.push({
 'event' : 'newsletterSignup' 
 });

 


Scroll depth

This is tracked entirely through GTM, and is controlled with a limitation in the trigger to only fire on relevant pages, using the information passed in the dataLayer as ‘pageType’. The types of pages that should have scroll depth tracking are:

The tracking is setup using the GTM native scroll depth trigger and variables, counting scrolling to 50%, 75% and 100% of the page. For most pages 25% would be triggered upon page load, which is why this threshold has been left out. 

 

 


Social Shares

Social Sharing events are automatically extracted in each P4 site – no need to set up a Tag in your GTM container 

We can track which social platforms users are sharing content to using Event Tracking. By pushing an event to the dataLayer once a user has shared something from the P4 site through one of the integrated share-buttons. The following dataLayer.push should be executed at the latest point possible when a user is sharing:

// Social Shares
window.dataLayer = window.dataLayer || [];
 dataLayer.push({
 'event' : 'uaevent' //do not alter this name
 'eventCategory' : 'Social Share' //The Event Category to be sent to GA
 'eventAction' : '[variable]' //Facebook/Twitter/Email
 'eventLabel' : '[variable]' //Optional, could be current URL
 }); });

The variable ‘network’, should contain which social network the user shared to (Facebook, Twitter, Email, etc.)

 

 


File Download

Whenever users click on a file (.pdf, .avi, .zip, etc..) an event will be fired to Google Analytics (Goal = File Download), allowing us to track file consumption and popularity. 

Name UA Event – File Download
Triggers Custom event = LinkClick Download 
Category File Download
Action {{filetype}}
Label {{Click Text}} – {{element url}}

Check the tag example below:

the ‘File Download’ GTM tag setup

The LinkCLick Download Trigger is setup as a Custom Event whenever the extension of the files is one the following (RegEx code):

*\.(7z|aac|arc|arj|asf|asx|avi|bin|csv|doc|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls|xml|z|zip)$

Check the tag example below:

The trigger of ‘File Download’ tag setup, allowing a lot of files types to be identified

 

 


Links & Resources