Bedrock uses Google Tag Manager (GTM) to manage and organize its Google Analytics solution.
GTM is a tag management system that allows for easy implementation of Google Analytics tags and other 3rd party marketing tags in a nice GUI experience. Tags can be added, updated, or removed directly from the GUI. GTM allows for a `one source of truth` approach to managing an analytics solution in that all analytics tracking can be inside GTM.
Bedrock's GTM solution is CSP compliant and does not allow for the injection of custom HTML or JavaScript but all tags use built in templates to minimize any chance of introducing a bug into Bedrock.
The GTM DataLayer
-----------------
How an application communicates with GTM is via the ``dataLayer`` object, which is a simple JavaScript array GTM instantiates on the page. Bedrock will send messages to the ``dataLayer`` object by means of pushing an object literal onto the ``dataLayer``. GTM creates an abstract data model from these pushed objects that consists of the most recent value for all keys that have been pushed to the ``dataLayer``.
The only reserved key in an object pushed to the ``dataLayer`` is ``event`` which will cause GTM to evaluate the firing conditions for all tag triggers.
DataLayer Push Example
----------------------
If we wanted to track clicks on a carousel and capture what the image was that was clicked, we might write a dataLayer push like this:
..code-block:: javascript
dataLayer.push({
'event': 'carousel-click',
'image': 'house'
});
In the dataLayer push there is an event value to have GTM evaluate the firing conditions for tag triggers, making it possible to fire a tag off the dataLayer push. The event value is descriptive to the user action so it's clear to someone coming in later what the dataLayer push signifies. There is also an image property to capture the image that is clicked, in this example it's the house picture.
In GTM, a tag could be setup to fire when the event ``carousel-click`` is pushed to the dataLayer and could consume the image value to pass on what image was clicked.
The Core DataLayer Object
-------------------------
For the passing of contextual data on the user and page to GTM, we've created what we call the Core DataLayer Object. This object passes as soon as all required API calls for contextual data have completed. Unless there is a significant delay to when data will be available, please pass all contextual or meta data on the user or page here that you want to make available to GTM.
GTM Listeners & Data Attributes
-------------------------------
GTM also uses click and form submit listeners to gather context on what is happening on the page. Listeners push to the dataLayer data on the specific element that triggered the event, along with the element object itself.
Since GTM listeners pass the interacted element object to the dataLayer, the use of data attributes works very well when trying to identify key elements that you want to be tracked and for storing data on that element to be passed into Google Analytics. We use data attributes to track clicks on all downloads, buttons elements, and nav, footer, and CTA/button link elements.
..Important::
When adding any new elements to a Bedrock page, please follow the below guidelines to ensure accurate analytics tracking.
| data-cta-text | Name or text of the link (e.g. 'Sign Up', 'Join Now', 'Start Here'). We use this when the link text is not useful, as is the case with many FxA forms that say, 'Continue'. We replace 'Continue' with 'Register'. |
