Notes from LunaMetrics' "Practical Google Analytics and Google Tag Manager for Developers".
The Google Tag Manager (GTM) manages tracking scripts from both Google and Third-Party providers:
- Google Analytics
- Adwords
- DoubleClick
- etc
There are other tag managers around, but GTM is free.
GTM has two parts:
- A web based interface for Managing GTM
- A two part container script that loads the tags, in the
<head>(asynchronous loading of JavaScript tags) and at the start of the<body>(<noscript>loading of supported tags). These are customised with the GTM container IDGTM-XXXXXX
Help information is available at https://developers.google.com/tag-manager/.
- set up tracking tags
- create containers containing collections of tags
- use permissions to control what gets published
- Choose a container, e.g. dontbelievethehype.co.nz
- New Tag > Add a new tag > Edit
- Choose Google Analytics
- Track Type: Page view
- Trigger: Page View
- Name the tag Pageview
- Save
Then:
- Create a variable: Google Analytics
- Enter GA ID (see Get a tracking ID, below)
- Save
- Back on the dashboard, the Workspace Changes show that PageView and Google Analytics have been added.
- Click Submit (top right of UI) to version and release the changes
- Cog/Admin > Create account
Notes:
- you can Exclude your IP from Google Analytics' stats by creating a filter.
At first glance, integration is not straightforward. WordPress allows developers to inject (enqueue) inline scripts into the <head>, but only at the bottom/end of the <body> - not at the top/start of it.
The Affectivia Hack achieves this by injecting a closing tag into the WP body_class filter. But it's a bit presumptuous and could break some themes.
DuracellTomi's Google Tag Manager for WordPress doesn't follow the WordPress way of adding scripts.
For the <head> portion, it hooks into the wp_head action to print a block of HTML (which contains the GTM script). See frontend.php.
For the <body> portion, it implements the Affectivia Hack as an experimental option, falling back to outputting the <noscript> part at the bottom of the <body>. The Affectivia Hack allows the plugin to inject the necessary code without requiring manual template integration.
DuracellTomi's Google Tag Manager does also expose a lot of WordPress data to GTM, however this comes at the cost of learning how to implement this manually, and why.
Google's instructions often conflict with the WordPress way of doing things. But if are to be WordPress developers, we must evolve the WordPress way, rather than madly hacking our way around it. Hacks create code debt which breaks interoperability between plugins and themes.
For the <head> portion, register an empty placeholder script, then load GTM as an inline script, optionally passing the GTM container ID as a localized variable.
For this to work, existing script loading actions must be left intact for wp_head, which means resolving render blocking on a script-by-script basis rather than by brute force
For the <body> portion, include the noscript block as a template-part.
From Google Tag Manager Button Click Tracking (2018 version) for Google Analytics, Facebook and AdWords
- GTM listens for a trigger type, e.g. Click
- Pinpoint the element you wish to track clicks on, by using Preview and inspecting the trigger Variable
- Focus the trigger type to the element by refining the trigger type to use the element's most unique attribute
- Connect the refined trigger type to a tag which fires an event in GA
- Check that the click is being tracked in GA, by using Preview and inspecting the trigger Variable
- Verify by using the Google Tag Assistant browser extension > Google Analytics > Events
- Go to https://tagmanager.google.com
- Select a property
- Select Triggers
- Create a new trigger, eg Click - Generic
- Click on the new trigger, click the Pencil (Edit) icon
- Trigger type: Click > All Elements, All Clicks > Save
- Variables (left nav) > Configure Built-In Variables > Check all the Click checkboxes
- Click Preview
- In a new tab, load your site and navigate to the page you want to test
- A Tag Manager toolbar will appear above Chrome Dev Tools
- In GTM, click Refresh
- Click on elements to test the listener
- Events will be logged to the Tag Manager toolbar's Summary pane
- To inspect an event, click on Variables, then click on an event
- Identify the unique feature of the element you want to track clicks on, e.g. Click Classes or Click ID
- Select Triggers
- Click on the trigger, click the Pencil (Edit) icon
- Rename the trigger to reflect the element that should listen for clicks, e.g. Click - Gallery Thumbnail
- Trigger type: Click > All Elements, Some Clicks > Specify unique identifier > Save
It's also possible to use data- attributes as listeners, see Track More Click Detail With Data Attributes And Google Tag Manager.
- Click on Tags (sidebar) > New
- Name the event, e.g. GA - Event - DTRT Gallery - Send Image to Viewer
- Click the Pencil (Edit) icon > select Universal Analytics (GA, if appropriate)
- Track Type > Event
- Category > Click
- Action > DTRT Gallery - Send Image to Viewer
- Google Analytics settings > {{Google Analytics}}
- Triggering > click the Pencil (Edit) icon > select Click - Gallery Thumbnail > Save
- Click Refresh
- Switch to the tab containing your webpage and reload it
- Click on the tracked element
- https://analytics.google.com/ > Select the appropriate account
- Select Real Time (on the left) > Events
- Over time these events will be viewable under Behaviour > Events > Overview
- Switch back to the GTM console
- Submit > Version Name DTRT Gallery - thumbnail click tracking for GA > Publish