1. Home
  2. page-builder
  3. Page templates
  4. Adding Google Analytics tracking on your pages

Adding Google Analytics tracking on your pages

Google Analytics is a service offered by Google that generates detailed statistics about a website’s traffic and can provide information to measure conversions and user activity.

You can use them on your Engaging Networks pages too.

This tutorial will go through the process of adding Google Analytics (“GA”) to your HTML Templates and a few pointers on how to view the data in the GA dashboard.

Since Google Analytics is a third-party product, it can be hard for Engaging Networks support to give advice should you be having any difficulties. It is best to refer to Google’s support pages.

Before starting

Requirements

  • Basic understanding of HTML
  • Access to Engaging Networks and HTML Templates
  • Understanding of Google Analytics

Recommendations

  • Make backups of the template you are editing by duplicating them (you can have as many templates as you wish)
  • Check that the template does not contain existing Google Analytics code (see next section)
  • Communicate with your team that you are making changes
  • Getting the most out of Google Analytics requires research. There are many tutorials and forums to help you gain better knowledge of it’s tools (Click here to see Google’s help)
  • Insert the code given by Google Analytics into the correct place of your template

Checking your HTML template for pre-existing Google Analytics code

The first thing is to check whether your HTML templates already contain GA code. Having two GA codes will mean either statistics being doubled or not captured correctly. See the ‘related content’ on the right for more information on templates.

Once you have opened up a template, the following snippet would *generally* appear at the top of your page before the closing tag. It is recommended though to check both the header and footer container areas.

Here is an example of what the GA code snippet might look like:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-92903440-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXX-X');
</script>

Adding the code into your template

If you want to add the Google Analytics code into your template, then follow the instructions in your Google Analytics account. Usually you go to Admin then under the property column is an item called Tracking info and then Tracking code. You will be asked to copy and paste the code into the <head> section of your template. Do not place it after the <body> tag. Place it somewhere between <head> and </head>.

Checking that it is working

The easiest way to check this is by using GA’s ‘real time’ view. GA can take a while to render the fully aggregated report in the account. You can however, see what pages or events are being triggered in real time.

In your GA dashboard, head to Real-Time and click on the Overview navigation item and on another tab, visit a page that has GA enabled.

If it works you should see an active user on your site, with the URL of the page shown. For more information on GA’s real time view, see Google’s help documentation here.

If it is working, then any pages with the template containing the GA code should start being logged and reported on.

Google Tag Manager

Google Tag Manager (GTM) is a product that allows you to insert multiple tracking “tags” via a single piece of code on your template. For example you may have Facebook Pixel code as well as Google Analytics. By using Tag Manager you can add them both in one piece of code in your template, which then calls up code stored in GTM.

The more powerful part is that you can link these, and other pieces of bespoke code, to “triggers”, which only fire in certain circumstances. For example, for donation pages you could create Google Analytics eCommerce transactions containing the amount the supporter donated, thereby including this in your GA reports. If you want to be able to fetch the donation amount, and other variables, from the Engaging Networks page, then read “Exposing transaction details” below.

Just like adding GA code, you can add GTM code instead to your template. The code will be given by your GTM product.

Exposing transaction details

In page-builder, it is possible to have the system add a JavaScript object to your page that contains various properties 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” object that consists of various key value pairs. Click here for more information on what the variables mean.

Example of using GTM with GA eCommerce

Once you expose transactions, you can use GTM to make eCommerce transactions. The example below adds a transaction and item, and then sends it to GA. The code is stored within GTM which fires when it encounters a URL that is a donation thank you page. How you set this up depends on your own GA account so you should only use this as an example of how it might work:

<script>
ga('require', 'ecommerce');
ga('ecommerce:addTransaction', { 
'id': pageJson.donationLogId, //Unique transaction ID (reference number) 
'revenue': pageJson.amount, //Donation amount
'currency': pageJson.currency //Local currency code 
}); 
ga('ecommerce:addItem', { 
'id': pageJson.donationLogId, //Unique transaction ID (reference number) 
'name': pageJson.pageName, //Page name 
'price': pageJson.amount, //Donation amount 
'sku': pageJson.appealCode, //Appeal code
'currency': pageJson.currency, //Local currency code
'quantity': '1' //Always set to 1 
}); 
ga('ecommerce:send');
</script>
Updated on May 29, 2019

Was this article helpful?

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support