For Forms and Block setup in Planet 4 see >> Block: Form (Engaging Networks)

 

 

Use the global campaign standards

It’s also extremely important to insert campaign informations on your petition pages. This will allow us to track global campaigns and will help you to analyse your local performance.

Please, use the 2019 Global Standards list for the campaign values.

 


Add campaign fields to your pages

Engaging Networks

But for EN petition pages, you should also insert the following DataLayer variables before the GTM code (the one that starts with <!– Google Tag Manager –>)  in the <head> of the page:

 

Please, use the 2019 Global Standards list for the campaign values.

<script>
//Campaign information 
window.dataLayer = window.dataLayer || [];
 dataLayer.push({
 'officeName': 'REPLACE_WITH_OFFICE_NAME_HERE',
 'gBasket': 'REPLACE_WITH_BASKET_NAME_HERE',
 'gCampaign': 'REPLACE_WITH_CAMPAIGN_NAME_HERE',
 'gScope': 'REPLACE_WITH_SCOPE_NAME_HERE',
 'gDepartment': 'REPLACE_WITH_DEPARTMENT_NAME_HERE',
});
</script>

Please, be careful. The code uses single quotation mark ( ‘ ) and not acute accent ( ´ )

 

Planet 4 (via Form Block)

There are two types of information that you need to define on the Planet 4 backend. Check the instructions below to understand why they are important and where you can set them up. 

 

Goal Field

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

 

Campaign Fields

The campaign values should be defined on the page level. You will find a box on the right side of your editor panel:

The campaign fields are automatically populated from the 2019 Global Standards. These values will help us to categorize campaigns and keep real-time tracking of our engagement actions around the world.

Technically speaking, the values defined in those fields are sent to Google Analytics as custom dimensions. Check the Google Tag Manager instructions below to understand how we can capture this information from the Planet 4 DataLayer and translate them into custom dimensions.

 


Track Petition Signups

 

Planet 4 (via Form Block)

Check out the video tutorial here.

 

Add new custom dimensions

1. Create dataLayer variables to capture goal and campaign information.

 

Use the same naming and index as the table below:

Field DataLayer Variable GTM Variable Index (GA)
Goal gGoal {{DLV – gGoal}}
Campaign gCampaign {{DLV – gCampaign}} 2
Basket gBasket {{DLV – gBasket}} 8
Scope gScope {{DLV – gScope}} 9
Department gDepartment {{DLV – gDepartment}} 12

 

E.g: Create a dataLayer variable on your GTM called {{DLV – gDepartment}}. Input the DataLayer variable name as “gDepartment“.

 

2. Insert these DataLayer values as Custom Dimensions on your Google Analytics settings variable.

 

Remember to edit both{{P4 EN UA ID}} and {{P4 GP UA ID}}


Obs: You don’t need to insert a custom dimension for the ‘Goal’ value, since this will only be used to categorize events.

 

Setup the P4 Petition Signup event

1. Duplicate the existing trigger [Event is petitionSignup] and name it [P4 – Event is petitionSignup].

Fire this trigger only on Some Custom events:

Page URL matches Regex .*/international/.*

Obs: Adapt to your Planet 4 URL (e.g .*/bulgaria/.*)

 

 

3. Create a new tag “PD – P4 – UA – Form Submissions”.

Follow the setup below and add it to your P4 Google Analytics settings.

 

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

Category {{DLV – gGoal}}
Action {{DLV – gCampaign}}
Label {{DLV – gScope}} 
GA Settings P4 GP UA ID
Triggers “P4 – Event is petitionSignup”

 

 

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:

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 EN

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 event for Engaging Networks

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.

 

Create the event trigger

1. Create a trigger called [EN – Event is petitionSignup].

This trigger should fire only on Some custom events:

Page Hostname equals act.greenpeace.org 

 

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

 

 

2. 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}}

(!) Make sure that you have manually added the dataLayer.push code snippet on your Engaging Network Pages. The new tracking will be based on those campaign values, so it’s important to make sure that they can be read in all of your pages. Follow the Global Standards 2019 for these values.

 


Hubspot GTM setup

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: 

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.

 


Preview, test and debug

Planet 4 (via Form Block) 

Submit the P4 Form Block and check if the tag “PD – P4 – UA – Petition Signup” has been fired:

Check at Google Analytics Real-Time reports to see the event. Test with two different blocks: one with Department value as Campaign and another with Engagement. You should see respectively a Petition Signup event and another one for Action Alerts.

 

Planet 4 (via Happy Point Block) 

Submit the Happy Point block and check if the tag “PD – EN – UA – Petition Signup” has been fired:


 

Engaging Networks pages

Submit the Petition Form and check if the tag “PD – EN – UA – Petition Signup” has been fired:

Check in Google Analytics Real-Time > Events to check if you can see the Petition Signup event

 


Video tutorial 

 

 


Links & Resources