Use Google Tag Manager to pass values to Floodlight tags

When implementing Floodlight tags in Google Tag Manager, you may want to pass values from your site to the tags to capture key marketing parameters that you can later use to build audiences or report on specific custom metrics.

dataLayer is a JavaScript object in Google Tag Manager that provides an interface for passing required values into macros that you can later use to populate your designated tags. This article explains how to use dataLayer to communicate with Campaign Manager 360 specifically and pass any required values to your Floodlight tags. For more in-depth explanations, please visit the Google Developers page on Google Tag Manager implementations for the web.

Traditionally, newly created Floodlight tags contain placeholders that web developers replace with the required values at the time when the tag is called. Take this sample fragment:

...
document.write('<iframe
    src="http://XXXXXXX.fls.doubleclick.net/activityi;src=XXXXXXXX;type=;cat=;u1=[item];u2=[quantity];u3=[price];u4=[postage];u5=[seller];ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
...

The elements in bold (item, quantity, price, postage, and seller) would have to be replaced by the actual values you are intending to pass to the Floodlight tag. Typically you can replace them using your Content Management System or have your development team code them in.

To configure Google Tag Manager to use variables to insert values when tags are called, follow the steps below. These steps assume your Campaign Manager 360 account is already connected to your relevant Google Tag Manager account and that you are able to send tags to Google Tag Manager and approve them. You can follow your typical testing and publishing process after making changes in Google Tag Manager.

Configuration

1. In Google Tag Manager, create macros for each value you need to pass.

   1. Give the macro a descriptive name. For example, if you are capturing the name of the product ordered, you could call the macro “product_name”.

   2. Set the macro type to Data Layer Variable.

   3. Indicate the name of the variable as it will be declared in your dataLayer call.

   4. For version number, select Version 2.

2. In Campaign Manager 360, create your Floodlight tag and enable your u standard variables.

3. Push the Floodlight tag to Google Tag Manager and approve it.

4. Edit the tag in Google Tag Manager and assign the appropriate macros to the different u variables. For example, if you are expecting to capture the name of the product within u variable “u1”, then you would:

   1. Go to the Custom variables section.

   2. Click the drop-down and select “u1”.

   3. Click the macro icon next to the text box and choose the “{{product_name}}” macro as created in step 1 (note that the curly brackets “{{}}” are used to indicate this is a macro and not the specific text “product_name”).

   4. Repeat for all other u variables and macros you wish to capture.

Implementation

There are several different ways to implement dataLayer that depend on which of the following situations is true for you.

Method 1: You have an existing confirmation page that contains all necessary values

Some websites use a Content Management System (CMS) or other similar method to create pages as they are requested. The CMS is able to pass values that were set on a previous page or come from a backend database.

In these cases, you can do the following:

1. Set a rule to fire the Floodlight tag when the URL equals your confirmation page.

2. Insert a dataLayer definition on your website before the Google Tag Manager tag similar to the following, replacing all the elements between brackets with the values you are trying to pass (this assumes all your macros are named with an appended _value):

   <script>
    var dataLayer = [{“item_value”:item_value,
        “quantity_value”:quantity_value,
        “price_value”: price_value,
        “postage_value”: postage_value,
        “seller_value”: seller_value}];
</script>

   Example populated tag:

   <script>
    var dataLayer = [{“item_value”:”great shoes”,
        “quantity_value”: 1,
        “price_value”: 20,
        “postage_value”: 8,
        “seller_value”: “shoemaker”}];
</script>

When Google Tag Manager fires the Floodlight tags, the specified macros will be replaced by the values you specified in the dataLayer definition.

Method 2: Your checkout and confirmation pages have the same URL or the page uses AJAX (JavaScript method)

1. Create a rule to fire the tag after an event. For instance, you might create an event called “purchase_complete”.

   Rule Name: fire_floodlight_tag
   Conditions: {{event}} equals purchase_complete
   Tags with This Rule: none

2. Use JavaScript to trigger the event and pass all needed information to the Floodlight tag:

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:item_value,
    “quantity_value”: quantity_value,
    “price_value”: price_value,
    “postage_value”: postage_value,
    “seller_value”: seller_value});

   Example populated JavaScript call:

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:”great shoes”,
    “quantity_value”: 1,
    “price_value”: 20,
    “postage_value”: 8,
    “seller_value”: “shoemaker”});

   Note that the added event value (in bold above) is used to signal the event used by Google Tag Manager to fire the Floodlight tag.

Method 3: Your checkout and confirmation pages have the same URL or the page uses AJAX (auto event tracking method)

Auto event tracking uses event listeners, a special type of tag that sits on a page waiting for user events to occur and then creates a programmatic event that can be used to trigger other tags. User events can include actions such as the click of a button or a link, the submission of a form, or a timer reaching a defined interval.

The following example describes how to use a link click listener to fire a tag. In this scenario, the event occurs when the user selects a product either by clicking on a list or choosing it from a drop-down, and they are then taken to a page to download a PDF brochure. This page will have a link to the brochure and it’s that action of clicking on that link that we want to track as a conversion.

Go to your Google Tag Manager account and perform the following actions:

1. Set up a link click listener.

   1. Choose New tag.

   2. Enter a descriptive name such as “downloadLinkListener” (this could be the name used in the PDF brochure download link).

   3. In the “Tag type” drop-down, hover over the “Event Listener” section and then select Link Click Listener from the expanded drop-down to the right.

   4. If the link is supposed to take the visitor to a different page, make sure Wait For Tags is checked. Don’t change the “Max wait time” field unless you have a specific reason to do so, such as if you’re firing a large number of tags and want to ensure that all of them have executed.

2. Set up a macro to capture the URL when the link is clicked.

   1. Choose New macro.

   2. Enter a descriptive name such as “linkURL”.

   3. Choose Auto-event variable from the “Macro type” drop-down.

   4. Choose Element URL from the “Variable type” drop-down (note that this option will only work with links that use the standard HREF format, as opposed to JavaScript links).

3. Set up a macro to capture the product that the user selects. For the purposes of this example, we’ll assume that the product name is listed in a drop-down menu and the HTML ID tag for the menu is “productName”. You should consult your web developer team if you need assistance finding this ID.

   1. Choose New macro.

   2. Enter a descriptive name such as “selectedProduct”.

   3. Choose Dom Element from the “Macro type” drop-down.

   4. In the “Element ID” field, enter the ID of the field. In this case, the ID is “productName” (without the quotes).

   5. Enter value in the “Attribute name” field, as we will be retrieving the content of the value attribute when the drop-down is selected.

4. Set up a rule to fire the event listener tag.

   1. Choose New rule.

   2. Enter a descriptive name such as “downloadLinkClicked”.

   3. Under “Conditions,” set the first drop-down to {{event}}, the second to equals, and the textbox to gtm.linkClick.

   4. Click the plus (+) sign.

   5. Set the first drop-down in the new line to the {{linkURL}} macro you created in Step 2, the second to equals, and the textbox to the URL of the PDF to download (for example, http://www.site.com/pdfs/brochure1.pdf).

5. Set up a Floodlight tag to capture the conversion (if you have already created this tag or shared it from Campaign Manager 360, skip to Step E).

   1. Choose New tag.

   2. Enter a descriptive name such as “brochureDownloadTag”.

   3. Choose the appropriate type of tag based on your needs, such as “Floodlight Counter”.

   4. Set “Advertiser ID,” “Group tag,” and “Activity tag string” with the identifying tag values and configure any other standard tag values as needed.

   5. From the drop-down under Custom Variables, choose u1 or whichever custom variable you wish to use for tracking purposes.

   6. Click the Macro button next to the text box and choose the {{selectedProduct}} macro you created in Step 3.

6. Test and publish as needed.