Set up Event Tracking

The event tracking is one of the most important aspects of the Global Property tracking. The setup can be done via Google Tag Manager.

Most of the events tracked on Planet 4 are based on dataLayer.push events, normally containing a single variable (the ‘event’ name). A few of these events also include custom variables, providing more information that we can be imported to Google Analytics through the Tag Manager setup.

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.

Event Naming Convention

The event pushes should be consistent in naming across all P4 sites, that makes it easier to benchmark and compare. Is through the use of the same event standard naming that we will be able to track, compare and monitor conversions in multiple websites.

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

  • MeRa = Members Returning for Action – see the full KPI list

  • PD = Precis Digital, the partner Agency who set this up with us

  • UA = Universal Analytics

  • EN = Engaging Networks

  • VPV = Virtual Page View

  • DLV = DataLayer Variable

  • GP = Greenpeace

  • Signup = Event where a user inserts an email (Petition, Subscribe..)

  • Share = Event where a user share a piece of content (email, social etc)

  • P4 = Planet 4

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:

Global Standard Events

Petition Signup

Follow the standard implementation method below or check the Tracking campaigns/petitions section for instructions on specific systems (e.g Planet 4, Engaging Networks, etc).

Method 1: Standard DataLayer

1) Push a dataLayer event. When a user successfully signs a petition, push the following event to the dataLayer:

<script>
//Petition Signup
window.dataLayer = window.dataLayer || [];
 dataLayer.push({
 'event' : 'petitionSignup'
 });
</script>

2) Create a trigger Capture petitionSignup events

3) Create the Universal Analytics event tag Create a tag called to send events to Google Analytics. Use the campaign variables to define action and label.

Follow the structure for the event structure:

  • Category = Petition Signup

  • Action = gCampaign

  • Label = gScope

Method 2: Planet 4 (via Form Block)

Define settings in Planet 4 Wordpress

There are two types of information that you must define on the Planet 4 backend to make sure your tracking will work properly:

1) Goal field This value should be defined on the EN Form Block backend. This will help us to categorise the events and understand what is the purpose of the form (e.g. petition signup, action alert, contact form, etc).

2) Analytics & Tracking fields Follow the instructions here to understand how to attribute data to specific projects

Create the setup in Google Tag Manager

1) Create a trigger called "P4 – Event is petitionSignup"

2) Fire this trigger only on Some Custom events: when PAGE URL matches Regex .*/international/.*

3) Create a new Universal Analytics tag called “PD – P4 – UA – Form Submissions”. Follow the setup below and connect it to your Google Analytics Settings variable:

Resume of the “PD – P4 – UA – Form Submissions”:

  • Category = gGoal

  • Action = gCampaign

  • Label = gScope

Method 3: Engaging Networks

In the first iterations of P4, most actions will happen on Engaging Networks, which means a custom implementation through GTM has been put in place, which requires a set of variables available on all campaign sites on the EN. Please make sure the following has been done:

In page-builder, it is possible to have the system add a variable to your page that contains details of the page, such as donation amount. This can be used in Google Analytics or Tag Manager to create eCommerce transactions. To enable this, go to where it says Hello YOURNAME in the top navigation, and then Account settings > Account Preferences and, near the bottom of the page, tick the box to “Expose transaction details”. Your page-builder pages will now contain a “pageJson” variable in JSON format.

These variables are imported into Google Tag Manager, by storing them in JavaScript Variables that can be used to send the proper data to Google Analytics.

DataLayer on Engaging Networks

As the current setup includes external links to petition (and in some cases, donations) hosted on Engaging Networks, the triggering of events has been built with a custom setup that will stop affecting the setup once / if Engaging networks will be decommissioned or replaced. The setup is using the pageJson variables on EN to trigger Custom HTML Tags that contain a dataLayer.push identical to the ones described in this guide should be implemented on donation and petition pages. This means that the tracking for petitions and donations will be using the same dataLayer.push moving forward, which means that no adjustments are needed. It also means that once the EN pages are no longer used, the Custom HTML Tags will no longer fire, and will not interrupt anything. They can, at this point, be deleted or paused in the container.

EN Client ID to URL

To able to distinguish which country a EN-site is related to, and thus which view should collect the data, a look-up table is used to add the country URL to the payload sent to Google Analytics.

This variable is used by the Google Analytics settings used for EN tracking to inject the correct URL into the collected Hit.

Create the setup in Google Tag Manager.

1) Create the event for Engaging Networks signups When a user successfully signs a petition, push the following to the dataLayer:

//Petition Signup
window.dataLayer = window.dataLayer || [];
 dataLayer.push({
 'event' : 'petitionSignup' 
 });

On the P4 Default GTM setup you can see the tag “PD – EN – dataLayer.push Petition” which will be pushing a ‘petitionSignup’ event on the EN Thank you pages.

You can use the same tag and trigger to the thank you page of external petitions, if you are using another advocacy tool.

2) Create a trigger called "EN – Event is petitionSignup" This trigger should fire only on Some custom events: when PAGE HOSTNAME equals act.greenpeace.org

Don’t forget to adapt “act.greenpeace.org” to your local EN URL.

3) Create a tag called “PD – EN – UA – Petition Signup”. This tag will now be used only to Engaging Network pages. Replace Action and Label with {{DLV – gCampaign}} and {{DLV – gScope}}

Method 4: Hubspot

When a NRO uses all petitions pages created outside P4 system or Engaging Networks, it means that the domains are different, this cause a conflict in Google Analytics and Google Tag Manager implementation. This is a problem.

How to bypass this issue? We can use Custom Fields that modify a URL that is sent to Google Analytics.

When we are using different domains, the Hostname and the URI filters doesn’t work because of a combination of all this URL fragments, and the default filter on Google Analytics configuration doesn’t support this type of customization. =(

If we work with such a complex configuration we need to make a custom filter of page path and location on Google Tag Manager variables. This filter ignores initial URL and transform the URL path in the same structure as of P4.

So if you are using the international json template on the P4 GTM Container you just need to insert 2 new custom fields in the UA variable of your Hubspot container.

1) Page Path field – This field will change the path of the URL to set the P4 pattern

Example: if your petition is hosted in greenpeace.org.br/antarctic (being the path /antarctic), in P4 Analytics you will see the path as /brasil/petition/antarctic . And we also remove the risk of conflict of a same path structure between Hubspot landing pages (petitions) and P4.

2) Hostname – This field will set virtually the Hostname to follow the path structure

Example: if your petition is hosted in greenpeace.org.br/antarctic , in P4 Analytics you will see the location as greenpeace.org.br/brasil/petition/antarctic

Here’s the full code for both fields:

  • Page >> /brasil/petition{{Page Path}}

  • Location >> https://{{Page Hostname}}/brasil/petition{{Page Path}}

IMPORTANT! You need to have 2 Variables in yout Hubspot GTM as well:

  1. the pageType variable. If you don’t have it, you need to create it.

  2. The CrossDomain variable. If you don’t have it, you need to create it.

Here’s a screenshot of your Hubspot container UA variable, with all the right fields:

And when you do a debugger, this is what you see.

Newsletter Signup

This push should be executed when a user successfully sign up via the submission form on the Planet 4 Happy Point Block or in any other website.

Method 1: DataLayer Events

1) Push a dataLayer event. When a user successfully signs a petition, push the following event to the dataLayer:

<script>
//Newsletter Signup
window.dataLayer = window.dataLayer || [];
 dataLayer.push({
 'event' : 'newsletterSignup'
 });
</script>

2) Create a trigger Capture newsletterSignup events

3) Create the event tag Create a tag called to send events to Google Analytics. Use the campaign variables to define action and label. Follow the structure for the event:

  • Category = Newsletter Signup

  • Action = Action Alert

  • Label = optional

Method 2: Trigger on thank you page

Recommended for Engaging Networks' newsletter forms.

1) Set up as a RegEx variable of the Petition tag

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):

Donation

This push should be executed when a user successfully makes a donation.

Method 1: DataLayer Events

1) Push a dataLayer event. When a user successfully signs a petition, push the following event to the dataLayer:

<script>
//Newsletter Signup
window.dataLayer = window.dataLayer || [];
 dataLayer.push({
 'event' : 'donationComplete'
 });
</script>

2) Create a trigger Capture donationComplete events:

3) Create the event tag Create a tag called to send events to Google Analytics. Follow the structure for the event:

  • Category = Donation

  • Action = Recurring or One-off

  • Label = currency

  • Value = amount donated

Social Shares

Social Sharing events are automatically extracted in each Planet 4 site.

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.)

  • Create a custom event trigger for uaevent

To capture dataLayer events in Google Tag Manager you should create a custom event trigger as below. We recommend naming it "Event is uaevent".

  • Create the generic event tag

Create a Google Analytics event tag with the following setup:

File Download

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

Check the tag example below:

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:

Scroll depth

This is tracked entirely through Tag Manager, 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:

  • Blog posts

  • Press Releases

  • Articles

  • Take Action pages

The tracking is setup using the Google Tag Manager's 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.

Page Depth after Homepage

1) Create a variable Create a HTTP Referrer variable to extract the referrer path. Select the component as Path:

2) Create a trigger Create a new pageview trigger based on the variable you have just created. It should be triggered when the referrer path matches your homepage path.

Example: {{Referrer - Page Path}} ends with /international/

3) Create the event tag Create a tag called “P4 UX - Page Depth after Homepage” to send events to Google Analytics. Use the trigger you have just created to fire this tag only on pages visited after the homepage.

Check a preview of the GPI Google Analytics Settings:

Planet 4 Events

We are working with data-* attributes to track events on Planet 4's navigation bar and footer. This should facilitate the standardisation of events across websites and also allow some flexibility when managing events in Google Tag Manager.

These custom data attributes are a construct of HTML 5 and widely supported in all major web browsers. It's user-friendly to implement and help us to capture additional information about the content on the page. See the example of the data attributes added to Planet 4's donate button: 

<a class="btn btn-donate" href="https://act.greenpeace.org/" 
data-ga-category="Menu Navigation" data-ga-action="Donate"  data-ga-label="Homepage">
Donate</a>

These values are extracted with the help of Google Tag Manager's variables and used as triggers to fire specific event tracking tags. This methodology should help us to keep the setup clean, objective and standardised across multiple websites.

Want to know more about data attributes? Check these articles from Mixed Analytics and Bounteous.

Extracting data attributes with Google Tag Manager

All the events tracking instructions defined below are based on data attributes. To read these values in Google Tag Manager we need to create specific variables. Follow the instructions below:

1) Create the data attributes variables Go to your container and create a new user defined variable. Select the Data Layer type and define the name and value as below:

  • DLV - dataset.gaCategory for gtm.element.dataset.gaCategory

  • DLV - dataset.gaAction for gtm.element.dataset.gaAction

  • DLV - dataset.gaLabel for gtm.element.dataset.gaLabel

Navigation

We have implemented a set of standards for Planet 4's navigation elements following the table below:

Follow the instructions below to implement the Navigation events on your Google Tag Manager:

1) Create the data attributes variables This event setup is based on data attributes. If you haven't created the variables to extract these values from Planet 4, please check the instructions above: "Extracting data attributes with Google Tag Manager"

2) Create the triggers Follow the setup described below for clicks on the Navigation Bar and Footer.

  • P4 - Clicks - Navigation Bar Create a click trigger of the type All Elements and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} equals Menu Navigation.

  • P4 - Clicks - Footer Create a click trigger of the type Just links and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} equals Footer Navigation.

3) Create the event tag Create a new Universal Analytics tag called "P4 - UA Event - Navigation" with the type event. Define the event settings based on the variables you created in the first step:

Don't forget to connect the event tag with the Global Property's Analytics Settings and add the click triggers you created in the previous step. See the example below:

Search Page

As the navigation events above, we are also working with data-* attributes to track events on Planet 4's search page.

Follow the instructions below to implement it in your Google Tag Manager:

1) Create the data attributes variables This event setup is based on data attributes. If you haven't created the variables to extract these values from Planet 4, please check the instructions above: "Extracting data attributes with Google Tag Manager"

2) Create the trigger Follow the setup described below for clicks on the Search Page

  • P4 - Clicks - Search Page Create a click trigger of the type All Elements and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} matches RegEx Search Page|Search Results

3) Create the event tag Create a new Universal Analytics tag called "P4 - UA Event - Navigation" with the type event. Define the event settings based on the variables you created in the first step:

Don't forget to connect the event tag with the Global Property's Analytics Settings and add the click triggers you created in the previous step. See the example below:

Columns Block

As the navigation and search events above, we are also working with data-* attributes to track events on Planet 4's Columns Block (see JIRA ticket here). This applies to all different layouts of the block in both Planet 4's pages and campaigns.

Follow the instructions below to implement event tracking via Google Tag Manager:

1) Create the data attributes variables This event setup is based on data attributes. If you haven't created the variables to extract these values from Planet 4, please check the instructions above: "Extracting data attributes with Google Tag Manager"

2) Create the trigger Follow the setup described below for clicks on the P4 Columns Block

  • P4 - Clicks - Columns Block Create a click trigger of the type Just Links and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} equals Columns Block

3) Create the event tag Create a new Universal Analytics tag called "P4 - UA Event - Columns Block" with the type event. Define the event settings based on the variables you created in the first step:

Don't forget to connect the event tag with the Global Property's Analytics Settings and add the click triggers you created in the previous step. See the example below:

Carousel Block

As the navigation and search events above, we are also working with data-* attributes to track events on Planet 4's Carousel Header Block (see JIRA ticket here).

Follow the instructions below to implement event tracking via Google Tag Manager:

1) Create the data attributes variables This event setup is based on data attributes. If you haven't created the variables to extract these values from Planet 4, please check the instructions above: "Extracting data attributes with Google Tag Manager"

2) Create the trigger Follow the setup described below for clicks on the P4 Columns Block

  • P4 - Clicks - Carousel Block Create a click trigger of the type Just Links and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} equals Carousel Header

3) Connect to the event tag for "Columns Block" Add the recently created trigger to the existing Universal Analytics tag called "P4 - UA Event - Columns Blocks". The event tag should have the following settings:

Don't forget to connect the event tag with the Global Property's Analytics Settings and add the click triggers you created in the previous step. See the example below:

Covers Block

As the navigation and search events above, we are also working with data-* attributes to track events on Planet 4's Covers Block (see JIRA ticket here). This applies to all different layouts of the block in both Planet 4's pages and campaigns and to the Take Action boxout displayed on posts.

Follow the instructions below to implement it in your Google Tag Manager:

1) Create the data attributes variables This event setup is based on data attributes. If you haven't created the variables to extract these values from Planet 4, please check the instructions above: "Extracting data attributes with Google Tag Manager"

2) Create the trigger Follow the setup described below for clicks on the P4 Covers Block

  • P4 - Clicks - Covers Block Create a click trigger of the type Just Links and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} matches RegEx Content Covers|Take Action Covers|Campaign Covers|Take Action Boxout

3) Create a general event tag for P4 Blocks Create a new Universal Analytics tag called "P4 - UA Event - Blocks" with the type event. Define the event settings based on the variables you created in the first step:

Don't forget to connect the event tag with the Global Property's Analytics Settings and add the click triggers you created in the previous step. See the example below:

Articles Block / List

As the navigation and search events above, we are also working with data-* attributes to track events on Planet 4's Articles Block (see the JIRA ticket for the articles block and articles list).

Follow the instructions below to implement event tracking via Google Tag Manager:

1) Create the data attributes variables This event setup is based on data attributes. If you haven't created the variables to extract these values from Planet 4, please check the instructions above: "Extracting data attributes with Google Tag Manager"

2) Create both triggers Follow the setup described below for clicks on the P4 Columns Block

  • P4 - Clicks - Articles Block Create a click trigger of the type Just Links and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} equals Articles Block

  • P4 - Clicks - Articles List Create a click trigger of the type All Elements and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} equals Articles List

3) Connect to the general event tag for P4 Blocks Add the recently created triggers to the existing Universal Analytics tag called "P4 - UA Event - Blocks" (event tag).‌

For more details about the event tag setup check the third step from the Covers block event section.

Split Two Columns Block

As the navigation and search events above, we are also working with data-* attributes to track events on Planet 4's Split Two Columns Block (see JIRA ticket here).

Follow the instructions below to implement event tracking via Google Tag Manager:

1) Create the data attributes variables This event setup is based on data attributes. If you haven't created the variables to extract these values from Planet 4, please check the instructions above: "Extracting data attributes with Google Tag Manager"

2) Create the trigger Follow the setup described below for clicks on the P4 Columns Block

  • P4 - Clicks - Split Two Columns Block Create a click trigger of the type Just Links and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} equals Split Two Columns

3) Connect to the general event tag for P4 Blocks Add the recently created trigger to the existing Universal Analytics tag called "P4 - UA Event - Blocks" (event tag).‌

For more details check the third step from the Covers block event section.

Page Header

As the navigation and search events above, we are also working with data-* attributes to track events on Planet 4's Page Header (see JIRA ticket here). This applies to all content types – pages, posts and campaigns.

Follow the instructions below to implement it in your Google Tag Manager:

1) Create the data attributes variables This event setup is based on data attributes. If you haven't created the variables to extract these values from Planet 4, please check the instructions above: "Extracting data attributes with Google Tag Manager"

2) Create the trigger Follow the setup described below for clicks on the P4's Page Header

  • P4 - Clicks - Header Block Create a click trigger of the type Just Links and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} equalsHeader

3) Connect to the general event tag for P4 Blocks Add the recently created trigger to the existing Universal Analytics tag called "P4 - UA Event - Blocks" (event tag).‌

For more details check the third step from the Covers block event section.

Country Selector

We are also working with data-* attributes to track events on Planet 4's Country Selector (see JIRA ticket here), which usually is displayed in the navigation bar at the top.

Follow the instructions below to implement it in your Google Tag Manager:

1) Create the data attributes variables This event setup is based on data attributes. If you haven't created the variables to extract these values from Planet 4, please check the instructions above: "Extracting data attributes with Google Tag Manager"

2) Create the trigger Follow the setup described below for clicks on the P4's Page Header

  • P4 - Clicks - Country Selector Create a click trigger of the type Just Links and set it to fire on some clicks. Define the conditions to match when {{DLV - dataset.gaCategory}} equalsCountry Selector

3) Connect to the general event tag for P4 Blocks Add the recently created trigger to the existing Universal Analytics tag called "P4 - UA Event - Blocks" (event tag).

For more details check the third step from the Covers block event section.

PreviousSet up the Google Analytics Settings in GTMNextSet up Ecommerce Tracking

Last updated