Use Google Tag Manager to pass values to Floodlight tags

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.

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.

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.

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://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.