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 4 will replace Google’s Universal Analytics (UA) on July 1st, 2023. After that point, Universal Analytics data will continue to be temporarily visible, but UA will not be usable as a platform.

Take a look at the webinar for background on what the switch to Google Analytics 4 means and how to prepare.

How does Google Analytics relate to Engaging Networks?

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 Google Analytics on your Engaging Networks pages to gain deeper insights on page activity and performance for reporting and optimization.

Setup simply involves adding Google Analytics (“GA”) to your HTML Templates.

Since Google Analytics is a third-party product, please be sure to refer directly to Google’s support pages for troubleshooting.

Given the upcoming transition to Google Analytics 4, you will want to confirm your current account setup in Google is ready for the transition. Accounts created after October 14, 2020 should already be set on Google Analytics 4. Accounts created prior will need to consider making the switch before the deadline if not using another tracking tool in replacement. 

Before starting

Requirements

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

Recommendations

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 conflicting GA codes will mean either statistics being doubled or not captured correctly. See the ‘related content’ on the right for more information on templates.

However, if aiming to transition from Universal Analytics to Google Analytics 4, it is recommended to overlap usage on your pages for both Google Analytics 4 and Universal Analytics accounts in order for Google Analytics 4 to gain more data to build from.

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 from the Universal Analytics implementation:

<!-- 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 properly, any pages with the template containing the GA code should start being logged and reported on in this dashboard.

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 June 30, 2022

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