AdWords Dynamic Remarketing

Why use Google Tag Manager to deploy Remarketing tags?

  • Managing custom parameters passed to the remarketing tag is complex. Parameters vary according to page type (homepage, category page, product page, cart page, confirmation page). With Google Tag Manager, you can often use rules to populate these parameters instead of hardcoding them on the page.
  • It's best to deploy the AdWords new remarketing tag with the AdWords conversion tracking tag, since the "conversion optimizer" feature depends upon it and can significantly improve a remarketing campaign's performance. This adds two additional tags to manage on different pages with different parameters. Google Tag Manager can reduce the complexity of managing the tags.
  • Remarketing List for Search Ads (RLSA) doesn't support lists defined by rules using custom parameters (e.g. price, category, pagetype). It only supports URL-rule-based lists (e.g. users who visited a page where the url contains 'cart') and tag-based lists. Google Tag Manager can compensate for this by firing the tags based on parameter values. 
  • Google Tag Manager makes the remarketing tag asynchronous (i.e. non-blocking as the page loads). Using the synchronous (non-Google Tag Manager deployed) version can slow down page load time.
  • Using Google Tag Manager, you can add or remove remarketing tag custom parameters. This gives you flexibility to experiment with different audience segmentation strategies (for example, targeting loyal customers or high spenders).
  • The goal is to deploy the following tags and corresponding parameters:

    Page type Remarketing tag Conversion Tracking tag
    Home ecomm_pagetype=home
    ecomm_prodid=
    ecomm_totalvalue=
    Not firing
    Category ecomm_pagetype=category
    ecomm_prodid=
    ecomm_totalvalue=
    Not firing
    Product ecomm_pagetype=product
    ecomm_prodid=
    ecomm_totalvalue=
    Not firing
    Cart ecomm_pagetype=cart
    ecomm_prodid=
    ecomm_totalvalue=
    Not firing
    Purchase Confirmation ecomm_pagetype=purchase
    ecomm_prodid=
    ecomm_totalvalue=
    value
    All other pages ecomm_pagetype=siteview
    ecomm_prodid=
    ecomm_totalvalue=
    Not firing

    1) Sign up for Google Tag Manager

    Go to http://www.google.com/tagmanager, follow the instructions to create an account and your container. Deploy the container's snippet code on every page of your site.

    2) Create rules for each page type

    Since the types of tag (remarketing vs conversion tracking) and the parameters depend on the page type, we will start by defining rules to differentiate those pages.

    Go to Rules > Overview and click "New Rule"

    Define five rules for the five page types. The most common way to do this is to use the URL. For example:

    Rule name: cart page

    Rule: url contains //www.googlestore.com/shoppingcart.aspx

    Using "url contains" instead of "url starts with" makes it possible to support both http and https protocols.

    Google Tag Manager fires tags asynchronously, in parallel to the page loading. So, if you are planning on using macros (see below) extracted from a Javascript variable or a DOM element defined after the container snippet , it's possible that your tags will fire before the data is ready.

    Therefore, you should add a condition to wait until the page (DOM) has completely loaded, using the built-in event "gtm.dom". For example:

    On rare occasions, the URL can't be used to differentiate page types. In those cases, you can use macros to achieve the same thing. For example, text inside your HTML page might be indicative of the pagetype.

    Let's imagine that you have the following HTML on your shopping cart:

    <div id="cart_title">Shopping Cart</div>

    1. Create a macro called "cart_text" of type "DOM Text" and specify the id "cart_title"

    1. Create a rule with for cart_text equals "Shopping Cart"

    Note that the HTML element containing the text you want to use to determine the page type must have an id. You may also need to use additional care when applying this methodology to multilingual websites, as the actual text may change depending on the language

    You can also use other macro types, such as JavaScript variable or DOM attribute to determine the page type.

    3) Prepare custom parameters

    Google Tag Manager gives you two options for passing custom parameters to the remarketing tag:

    • the dataLayer, a JavaScript construct to pass parameters
      • Pros: recommended way, cleanest way to pass the right parameters
      • Cons: requires JavaScript coding
    • manually setting each of the parameters using macros
      • Pros: JavaScript coding may not be necessary, easier setup
      • Cons: Must be able to extract all the data from the page via macros, does not accomodate arrays (which is useful to get the list of product ids in a cart page for example) or string manipulation

    3.1) Option 1 (Recommended): Using the dataLayer

    The dataLayer is a Javascript object use to transmit data to Google Tag Manager. In this case, we have to transmit the google_tag_params object (described in the remarketing tag implementation guide). For example:

    <script>
    var google_tag_params = {
      ecomm_prodid: ['123A', 'H456'],
      ecomm_pagetype: 'cart',
      ecomm_pname: ['Google Nexus 5','Game of Thrones'],
      ecomm_category: ['electronics', 'books'],
      product_value: [349.00, 19.99],
      ecomm_totalvalue: 368.99
      }

    dataLayer = [{
      google_tag_params: window.google_tag_params
      }];
    </script>

    Refer to the dataLayer documentation at https://developers.google.com/tag-manager/reference for more info.

    3.2) Option 2: Using macros for each custom parameters

    For all the parameters needed for dynamic remarketing, create macros to extract the information from the page:

    1. ecomm_pagetype (completed earlier)
    2. ecomm_prodid
    3. ecomm_pname
    4. ecomm_category
    5. product_value
    6. ecomm_totalvalue

    The difficulty here is to find where this information is available on the various page types and find the right macro type to extract it: DOM text, DOM attribute or JavaScript variable.

    A DOM attribute is an attribute inside of an HTML element, such as:

    <div id="product" sku="ABC123">Lava lamp</div>

    A JavaScript variable could be the following:

    <script>
    ...
    var prodids = ['123','456'];
    var prodcat = 'gift';
    ...
    </script>

    3.3) Option 3 (Advanced): using the Custom HTML tag

    This option allows you to deploy any kind of JavaScript code to extract the information you need, which gives you great flexibility.

    Let's imagine that you have the following page:

    URL:

    http://www.example.com/lava-lamp--0000AK12345-

    HTML:

    <html>
      <title>Example.com: Lava Lamp for cheap</title>
    <head>
    </head>
    <body>
      <h1>Lava Lamp</h1>
      <div id="productdetails">
        <div class="prd-price">$99.99</div>
      </div>
    </body>
    </html>

    Create a new Tag, of type "Custom HTML tag" and paste the following:

    <script>
    var prodIdRe = /--0*(.*)-/; // regular expression to extract prodid from URL
    var ecomm_prodid = prodIdRe.exec({{url}})[1]; // reference to the URL macro
    // Extracting price
    var prodDetailsElmt = document.getElementById('productdetails');
    var priceElmt = prodDetailsElmt.getElementsByTagName('div')[0]; //first div
    if(priceElmt.className == 'prd-price') { // check class
      var price = parseFloat(priceElmt.textContent.substr(1));
    }
    dataLayer.push({
      event:'fire_rmkt_tag',
      ecomm_prodid: ecomm_prodid,
      price: price
    });
    </script>

    The first part of the code allows you to extract and format the information we need. You can use the full power of JavaScript string manipulation (regular expressions, substrings, etc...) and access to the DOM (HTML elements).

    Once all this prep work has been done, you can fire an event ('fire_rmkt_tag') and pass it the parameters you want.

    Set up the rule to execute this code on all relevant pages, for example all product pages. It's advised that you perform extensive testing to verify that parameters are extracted properly on all pages, and to assure that the code works on every major browser version. For example, pages in a certain product categories might have a different layout than others (say apparel vs electronics) so your code might need to be different.

    Extracting information directly from the page or the URL is an attractive solution because it allows you to avoid relying on an IT/webmaster team to pass the right parameters. However, it is a potentially more fragile solution that may break if the layout of the page changes.

    All that remains is to create another tag of type "AdWords remarketing" and set it with a rule to fire when the event 'fire_rmkt_tag' is received.

    4) Setup the tags

    Now it's time to assemble everything.

    4.1) Conversion tracking

    First, set up the conversion tracking tag.

    1. In your AdWords account, navigate to Tools and Analysis > Conversions. Click the Code tab.
    2. Select an action name on the left and select I make changes to the code.
    3. In the code box, find "var google_conversion_id = ". Enter the number you find into the google_conversion_id field on this page.
    4. In the code box, find "var google_conversion_label = ". Enter the number you find into the google_conversion_label field on this page.

    5. Optionally, set up the conversion value, using the macros you defined earlier. Otherwise, leave the value to the default (0).

    6. Add the rule you defined in step 2 for the purchase confirmation page

    7. Save

    4.2) Remarketing tag

    Configure a remarketing tag:

    1. In AdWords, click the Campaigns tab.
    2. In your campaign list on the left, click Shared library > Audiences.
    3. Find the list we created for you named "Main List", click [Tag] under the"Tags/Definitions" column, and then click the "Tag" link.
    4. In the code box, find "var google_conversion_id = ". Enter the number you find into the Conversion ID field on this page.
    5. In the code box, find "var google_conversion_label = ". Enter the number you find into the Conversion Label field on this page.

    Select the rule defining when the tag should fire. If you chose the dataLayer option, you can set it to fire on all page since the dataLayer will already contain the right parameters for each page type. If you chose the "manual" or the advanced (custom HTML) option, you'll need to create one tag for each page type since the parameters are different.

    Set up the custom parameters. If you chose to use the dataLayer (step 3.1), all you have to do is select the appropriate variable name that contains the custom parameters, in this case google_tag_params.

    If you chose to use the macros (step 3.2 and 3.3), you will have to create a separate tag for every different page type, and associate the right macro to each parameter. To begin with, create a separate macro of type "constant string" for each page type: home, visit, product, cart, purchase.

    Now create a new remarketing tag for each page type and manually specify each parameter to point to the right macro.



    5) Preview and test

    1. Navigate to Versions > Overview
    2. Click "Create Version..."
    3. Click "Save and Preview". This will set a cookie for your browser, and for your browser only, to test your GTM setup. Other visitors will not see this until you click "Publish"

    1. In the same browser, open a new tab and navigate to your site. You should see a Google Tag Manager panel appear at the bottom of each page showing you exactly which tags are firing or not and when.
    2. Note that you won't be able to check tags by viewing the HTML source of the page, because Google Tag Manager loads everything asynchronously. You should use the AdWords Remarketing Validation tool Chrome extension (https://chrome.google.com/webstore/detail/adwords-remarketing-tag-v/iokkmdmobnhjmhbapieilipodaaeohol?hl=en-US) to verify that the parameters are passed properly and that the product ids match your merchant center Feed
    3. Make sure you navigate all pages of your site (home, category, product, cart, purchase confirmation) and check that the tags are firing as you expect them to.

    6) Publish

    1. Once you are satisfied, go back to Google Tag Manager, exit the Preview mode and click "Publish".
    2. Within 24 hours, the list of attributes should be populated in the AdWords User Interface and you can start building your audience lists.