Last Updated: April 8, 2019

Here is how to properly install Google Ads Dynamic Remarketing Tags on your Shopify store.

The code needs to be installed in two places:

  1. At the top of your theme.liquid in between the HEAD tags
  2. In the “Additional Scripts” field in your Store’s Admin > Settings > Checkout section

Theme.liquid

Step 1: Create a Remarketing Snippet

In your store’s admin section go to:

  • Online Store > Themes > Edit HTML/CSS
  • Expand the Snippets section and click “Add new snippet”
  • Call the snippet “adwords-remarketing”
  • Paste the following code into the snippet
  • Update the google_conversion_id to use your specific conversion Id (you will find it in your Google AdWords account)
{% comment %} Enter your google conversion id below {% endcomment %}
{% assign google_conversion_id = 123456789 %}

{% assign shopify_store_country  = 'US' %}
{% if shop.currency == 'CAD' %}
{% assign shopify_store_country  = 'CA' %}
{% elsif shop.currency == 'AUD' %}
{% assign shopify_store_country  = 'AU' %}
{% endif %}

<!-- Global site tag (gtag.js) --&gt;
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-{{ google_conversion_id }}"&gt;</script&gt;
<script&gt;
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-{{ google_conversion_id }}');
</script&gt;

<script&gt;
  function getUserId() {
    if(typeof __st !== 'undefined' &amp;&amp; __st["cid"]) {
      return __st["cid"];
    } else {
      return;
    }
  }

  var _data = {'send_to': 'AW-{{ google_conversion_id }}', 'ecomm_pagetype':'other', 'user_id': getUserId()};

{% if template contains 'cart' %}
  _data["ecomm_pagetype"] = 'cart';
  _data["ecomm_prodid"] = [{% for item in cart.items %}'shopify_{{ shopify_store_country  }}_{{ item.product.id }}_{{ item.variant.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}];
  _data["ecomm_totalvalue"] = '{{ cart.total_price | money_without_currency  | remove: ','  }}';
  
{% elsif template contains 'collection' %}
  var _prodid = [{% for item in collection.products limit:5 %}'shopify_{{ shopify_store_country  }}_{{ item.id }}_{{ item.variants.first.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}];
  _data["ecomm_pagetype"] = 'category';
  _data["ecomm_category"] = '{{ collection.handle }}';
  
{% elsif template contains 'index' %}
  _data["ecomm_pagetype"] = 'home';
  
{% elsif template contains 'product' %}
  _data["ecomm_prodid"] = 'shopify_{{ shopify_store_country  }}_{{ product.id }}_{{ product.selected_or_first_available_variant.id }}';
  _data["ecomm_pagetype"] = 'product';
  _data["ecomm_totalvalue"] = '{{ product.selected_or_first_available_variant.price | money_without_currency  | remove: ','  }}';
  
{% elsif template contains 'search' %}
  _data["ecomm_prodid"] = [{% for item in search.results limit:5 %}'shopify_{{ shopify_store_country  }}_{{ item.id }}_{{ item.variants.first.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}];
  _data["ecomm_pagetype"] = 'searchresults';
		
{% endif %}

  gtag('event', 'page_view', _data);
</script&gt;

This code is also available on GitHub: Shopify Remarketing Code Snippet

Step 2: Include the snippet in your Theme file

Open up the theme.liquid file and add the following line of code before the closing </head> tag:

{% include 'adwords-remarketing' %}

Checkout Scripts

In your Shopify Store’s Admin, go to:

  • Settings > Checkout
  • Scroll down to the “Additional Scripts” field.
  • Copy and paste the code below into the “Additional Scripts” field
  • Make sure you update the code with your own custom google_conversion_id and google_conversion_label
  • NOTE: The code below also includes Google Ads Conversion Tracking. If you already have conversion tracking installed, make sure you are not duplicating conversions.
{% if first_time_accessed %}
{% comment %} Enter your account specific values below {% endcomment %}
{% assign google_conversion_id = 123456789 %}
{% assign google_conversion_label = "abcdefghijklmnop" %}

{% assign shopify_store_country  = 'US' %}
{% if shop.currency == 'CAD' %}
{% assign shopify_store_country  = 'CA' %}
{% elsif shop.currency == 'AUD' %}
{% assign shopify_store_country  = 'AU' %}
{% endif %}


<!-- Global site tag (gtag.js) --&gt;
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-{{ google_conversion_id }}"&gt;</script&gt;
<script&gt;
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-{{ google_conversion_id }}');
</script&gt;

<!-- Event snippet for Web Order conversion page --&gt;
<script&gt;
    function getUserId() {
      if(typeof __st !== 'undefined' &amp;&amp; __st["cid"]) {
        return __st["cid"];
      } else {
        return;
      }
    }

    // Conversion
    gtag('event', 'conversion', {
        'send_to': 'AW-{{ google_conversion_id }}/{{ google_conversion_label }}',
        'value': {{ checkout.subtotal_price | money_without_currency | remove: ',' }},
        'currency': '{{ shop.currency }}',
        'transaction_id': '{{ order.order_number }}'
    });

    // Remarketing
    gtag('event', 'page_view', {
        'send_to': 'AW-{{ google_conversion_id }}',
        'user_id': getUserId(),
        'ecomm_pagetype': 'purchase',
        'ecomm_prodid' : [{% for item in order.line_items %}'shopify_{{ shopify_store_country }}_{{ item.product.id }}_{{ item.variant.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
        'ecomm_totalvalue' : '{{ total_price | money_without_currency | remove: ',' }}'
    });
</script&gt;

{% endif %}

Download the code from Github here: Shopify Checkout Remarketing Code

Final Step: Verification

Once you’ve installed all your code, it’s time to run through your site and main pages (collection, product, cart, and purchase pages) with Google Tag Assistant installed. This will help you troubleshoot any errors.

14 Comments

  1. Hi Alex, thanks for this detailed and thorough instructions. I have followed your steps and they are all clear to me (except the product variant part in the comments of a Dutch user). However, Google Tag Assistent now shows 3 Tags on normal pages but only analytics tag on checkout. With my code which I had there before, I had 4 tags, including gtag for conversion and remarketing (however they didnt really work well because pruduct.id for remarketing was missing and my smart shopping campaign never started).

    Can you help me out? I dont know what to do! I checked the Checkout code severals times now…

    Like

    1. Hi Manuel,

      When you say “checkout”, do you mean the order complete / thank you page? Or do you mean the order checkout process after the shopping cart?

      The issue *might* be the first line in my checkout script: “if first_time_accessed”

      This causes the code to only run once per user — so that multiple conversions don’t get recorded — it’s possible you are not seeing the tags because you have are refreshing the same page? Try putting through a new order and checking the tags the very first time the thank you page appears…

      Alex

      Like

  2. I’m trying to set it up for a custom app in a store which redirects the user to another page immediately after the Thank you page is loaded. And in this process, this code isn’t triggered at times. I tried to use “event_callback” property to wait until both the codes are triggered completely and then redirect the user, but it fails when an adblocker is used. How do I proceed with this? Will the beacon method work with your code?

    Like

    1. Hi HImanshu,

      Unfortunately the redirect scenario is not something that I have tested. I don’t think there’s an easy workaround to that other than having a “Your are about to be redirected to another page… Click here to continue” and have the redirect wait 3 seconds or so.

      In terms of the ad blockers, that’s unfortunately a reality of the internet in this day and age. More and more traffic is likely to get missed due to Ad Blockers…

      Best,
      Alex

      Like

  3. Hi Alex!
    I don’t really understand HTML code and I have 4 questions:
    1. I need to add the Google converting id only one time at the beginning of the code or every time I see “google_conversion_id”?
    2. If we use EUR currency, we need to change something in the code?
    3. how can I know of the code work?
    4. where can I check how many time every parameter fire? like on facebook that you can see in the pixel how many time people went to add to cart page or view_content page or any other parameter?

    Thanks a lot!
    Asaf

    Like

  4. Hi there, thanks for this! I keep getting “Some products are not valid”, but Google Tag manager correctly shows the ecomm_prodid and other parameters?

    ecomm_prodid shopify_NL_3069029580900_25312618414180
    ecomm_pagetype product
    ecomm_totalvalue 7900

    Like

    1. Hi Sebastiaan,

      Check to make sure that shopify_NL_3069029580900_25312618414180 is indeed in your Merchant center feed and uploaded to Merchant center? Did you upload your entire product feed to Merchant center, or are there some products that you chose not to upload?

      Best,
      Alex

      Like

      1. Hi Alex,

        In Merchant Center the only Item_ID used is 25312618414180. I can’t find the first part 3069029580900 in Merchant Center. I don’t have product variants so it couldn’t be that either?

        Liked by 1 person

    2. Hi Sebastiaan,

      You either need to:
      1) Change the way your products are being uploaded to Merchant center to use the Shopify style product id (shopify_NL_productid_variantid), or
      2) Change my remarketing code to only use the VariantId as the google product id (I think it would be something like: {{ product.selected_or_first_available_variant.id }}

      Alex

      Like

  5. It took a couple of days and now ecomm_prodid or other parameters appear!

    I have one more question)

    What is this function for?
    function getUserId() {
    if(typeof __st !== ‘undefined’ && __st[“cid”]) {
    return __st[“cid”];
    } else {
    return;
    }
    }

    Thanks!

    Liked by 1 person

    1. Sorry for the late reply.

      This code attempts to grab the Shopify UserId of the current user on the site, and then passes it along to Google Ads to allow for more accurate user tracking across different devices, etc… Not all Google Ads accounts have access to this feature.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s