Here is how to properly install Dynamic Remarketing Tags on your Shopify store, which will let you run dynamic product ads on the Google Display network.
The code needs to be installed in two places:
- At the bottom of your theme.liquid
- In the “Additional Scripts” field in your Store’s Admin > Settings > Checkout section
Add the Code to 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 = 0 %}
{% assign shopify_store_country = 'US' %}
{% if shop.currency == 'CAD' %}
{% assign shopify_store_country = 'CA' %}
{% endif %}
<script type="text/javascript">
{% if template contains 'cart' %}
var google_tag_params = {
ecomm_prodid: [{% for item in cart.items %}'shopify_{{ shopify_store_country }}_{{ item.product.id }}_{{ item.variant.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
ecomm_pagetype: 'cart',
ecomm_totalvalue: {{ cart.total_price | money_without_currency | remove: ',' }}
};
{% elsif template contains 'collection' %}
var google_tag_params = {
ecomm_prodid: [{% for item in collection.products limit:5 %}'shopify_{{ shopify_store_country }}_{{ item.id }}_{{ item.variants.first.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
ecomm_pagetype: 'category',
ecomm_category: '{{ collection.handle }}'
};
{% elsif template contains 'index' %}
var google_tag_params = {
ecomm_pagetype: 'home'
};
{% elsif template contains 'product' %}
var google_tag_params = {
ecomm_prodid: 'shopify_{{ shopify_store_country }}_{{ product.id }}_{{ product.selected_or_first_available_variant.id }}',
ecomm_pagetype: 'product',
ecomm_totalvalue: {{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}
};
{% elsif template contains 'search' %}
var google_tag_params = {
ecomm_prodid: [{% for item in search.results limit:5 %}'shopify_{{ shopify_store_country }}_{{ item.id }}_{{ item.variants.first.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
ecomm_pagetype: 'searchresults'
};
{% else %}
var google_tag_params = {
ecomm_pagetype: 'other'
};
{% endif %}
/* <![CDATA[ */
var google_conversion_id = {{ google_conversion_id }};
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/{{ google_conversion_id }}/?value=0&guid=ON&script=0"/></div>
</noscript>
This code is also available on GitHub: Shopify Remarketing Code Snippet
Step 2: Install the snippet in your Theme file
Open up the theme.liquid file and add the following line of code before the closing </body> tag:
<!-- Dynamic Remarketing -->
{% include 'adwords-remarketing' %}
Add the Code to 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.
<!-- Google Dynamic Remarketing -->
{% comment %} Enter your account specific value below {% endcomment %}
{% assign google_conversion_id = 0 %}
{% assign shopify_store_country = 'US' %}
{% if shop.currency == 'CAD' %}
{% assign shopify_store_country = 'CA' %}
{% endif %}
<script type="text/javascript">
var google_tag_params = {
ecomm_prodid: [{% for item in order.line_items %}'shopify_{{ shopify_store_country }}_{{ item.product.id }}_{{ item.variant.id }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
ecomm_pagetype: 'purchase',
ecomm_totalvalue: {{ total_price | money_without_currency | remove: ',' }}
};
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = {{ google_conversion_id }};
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/{{ google_conversion_id }}/?guid=ON&script=0"/></div>
</noscript>
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.
Common errors include:
- Products not properly uploaded to Google Merchant Center
- Google Conversion Id not properly set
menu and choose Edit HTML / CSS