Getting Advanced With Google Tag Manager (Part 2 of 3)
Bringing dynamic data to your tags with the data layer and macros
Bringing dynamic data to your tags with the data layer and macros
In my last article Take Control of Tagging with Google Tag Manager, I covered the advantages of Google Tag Manager and how to get started with it. Today we’ll look at passing dynamic values into your contained tags using the data layer and macros.
The data layer
In technical speak, the data layer is a JavaScript object that sits on your page and contains information about the page, its content, and/or your visitor. Google Tag Manager reads the information from the data layer and passes it on to the relevant tags within your tag container. The data layer can be set at the time of page load, or it can be added dynamically during a user’s interaction with the page. If any of your tags require passing dynamic variables to it, then you’ll most likely need the data layer.
Macros
When Google Tag Manager refers to “Macros,” don’t think of macros in Microsoft Excel or Microsoft Word. In programming speak, macros can be compared to variables. Macros are used to read values from a page. The macros can then be used to pass values on to your tags or be the basis for tag firing rules. Macros can be used to read information from the data layer, but it can also be used to grab values from HTML elements on your page.
An example
Data layers and macros can sound pretty abstract without seeing them in action. Let’s look at a practical example that continues on from last week’s example. Last week we set up a basic AdWords conversion tracking tag and a Facebook conversion pixel. What we didn’t do is pass dynamic transaction values to the pixels so that it could also report on the actual value of the transaction. To pass this information into Google Tag Manager, we need to define a data layer variable that holds the value of the transaction, read the value via a macro, and then pass that value to the respective tags.
Here’s how we do it:
1. Let’s imagine the value of the transaction is $100. You would ask your web developer to include the below on your transaction completed page:
dataLayer.push({'conversionValue':100});
2. Now let’s go into Google Tag Manager, navigate to our container, and click on “New Macro.”
3. Give your macro a name. Under “Macro Type” select “Data Layer variable.”
4. Under Data Layer Variable Name, enter “conversionValue.” This has to match the label you used in your dataLayer. Leave “Do not set a default value” checked for this example. You could uncheck it and set a default value in instances where you would want there to be a default value if the variable was missing from the data layer.
5. Click “Save.”
6. Now we need to pass the macro’s value to our tags from last week. Expand the Tags menu and select the AdWords conversion tracking tag we created last month.
8. In the Conversion Value field, click on “+{{macro}}” and select “{{conversionValue}}.”
Now whenever conversionValue is available in the data layer, the actual value (e.g., 100) will be inserted in the place of {{conversionValue}}.
9. Let’s repeat the same process with the Facebook conversion pixel we created last time. In this custom HTML tag, replace
fb_param.value = ‘0';
with
fb_param.value = ‘{{conversionValue}}';
You’ll notice that we used the same macro in multiple locations. Macros are reusable across your container’s various tags and rules.
10. After this create a new container version (see last post), test it, and then publish it.
Those are the simple steps for passing dynamic values from your page to the tags within your Google Tag Manager containers. This is just scratching the surface. If you’re curious, look into using macros to read values directly from the existing HTML on your page or your page’s URL.
In my next column I will walk through best practices for managing your Google Tag Manager account.
Until then: happy tagging!