Adding Google Adwords Remarketing Tag To Shopify
An easy step by step guide on how to add a remarketing tag for both category and product pages
Step 1)
Login to your Shopify Admin Panel
Step 2)
Open up the theme editor by going to Online Store > Themes
Step 3)
In the top right corner click on actions. A menu will appear and click on Edit HTML/CSS
Step 4 )
Click on theme.liquid inside the layout folder.
Step 5 )
Login to Google Adwords, then in the top right corner click on the 3dot menu and select Audience Manager from the Shared Library section
If you already have a remarketing code, skip this section and go to the next section with continue here.
Click on setup audience list
Then click on setup tag
From the left hand, menu click on Audience Source and click on the 3dot menu and choose edit source within the Adwords tag section
Select the following (continue here)
- Dynamic Remarketing
- Collect specific attributes or parameters to personalize ads
- Business Type
- Retail
- Retail Parameters
- ecomm_pagetype
- ecomm_prodid
- ecomm_totalvalue
Than download snippet
Step 6 )
At the bottom of the file before the closing </body> tag, paste the code below.
Important! :
- Change the XX-XXXXXXXXX three times with the value found in your downloaded script example gtag(‘config’, AW-123456798‘);
- <script async src=”https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXXX”></script>
- gtag(‘config’, ‘XX-XXXXXXXXX’);
- ‘send_to’: ‘XX-XXXXXXXXX’,
- Change the ecomm_prodid country code to yours.
- For example: if your store is in the US, then change shopify_GB_ to shopify_US_
Prices with decimal separator
{% if template contains 'product' or template contains 'collection' or template contains 'index' or template contains 'search' %}
<!-- Global site tag (gtag.js) - AdWords. Created by FeedArmy.com -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XX-XXXXXXXXX');
</script>
<script>
gtag('event', 'page_view', {
'send_to': 'XX-XXXXXXXXX',
'ecomm_pagetype': '{% if template contains 'collection' %}category{% elsif template contains 'product' %}product{% elsif template contains 'search' %}searchresults{% elsif template contains 'index' %}home{% endif %}',
{% if template contains 'product' %}
'ecomm_prodid': 'shopify_GB_{{ product.id }}_{% if product.variants.first.id %}{{ product.variants.first.id }}',{% else %}{{ product.variants.id }}',{% endif %}
{% endif %}
{% if template contains 'product' %}'ecomm_totalvalue': {{ product.price_min | money_without_currency | remove:',' }}{% endif %}
});
</script>
{% endif %}
Prices with comma separator
{% if template contains 'product' or template contains 'collection' or template contains 'index' or template contains 'search' %}
<!-- Global site tag (gtag.js) - AdWords. Created by FeedArmy.com -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XX-XXXXXXXXX');
</script>
<script>
gtag('event', 'page_view', {
'send_to': 'XX-XXXXXXXXX',
'ecomm_pagetype': '{% if template contains 'collection' %}category{% elsif template contains 'product' %}product{% elsif template contains 'search' %}searchresults{% elsif template contains 'index' %}home{% endif %}',
{% if template contains 'product' %}
'ecomm_prodid': 'shopify_GB_{{ product.id }}_{% if product.variants.first.id %}{{ product.variants.first.id }}',{% else %}{{ product.variants.id }}',{% endif %}
{% endif %}
{% if template contains 'product' %}'ecomm_totalvalue': {{ product.price_min | money_without_currency | replace: ',', '.' }}{% endif %}
});
</script>
{% endif %}
Step 7)
Add the remarketing code to cart.liquid at the bottom of the file
Click on cart.liquid within your Templates
Important! :
- Change the XX-XXXXXXXXX three times with the value found in your downloaded script example gtag(‘config’, AW-123456798‘);
- <script async src=”https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXXX”></script>
- gtag(‘config’, ‘XX-XXXXXXXXX’);
- ‘send_to’: ‘XX-XXXXXXXXX’,
- Change the ecomm_prodid country code to yours.
- For example : if your store is in the US, than change shopify_GB_ to shopify_US_
- Paste the final code at the bottom of the file
Prices with decimal separator
<!-- Global site tag (gtag.js) - AdWords. Created by FeedArmy.com -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XX-XXXXXXXXX');
</script>
<script>
gtag('event', 'page_view', {
'send_to': 'XX-XXXXXXXXX',
'ecomm_pagetype': 'cart',
{% if cart.item_count > 1 %}
'ecomm_prodid': [{% for item in cart.items %}'shopify_GB_{{ item.product_id }}_{{ item.variant_id }}',{% endfor %}],
{% else %}
'ecomm_prodid': [{% for item in cart.items %}'shopify_GB_{{ item.product_id }}_{{ item.variant_id }}'{% endfor %}],
{% endif %}
'ecomm_totalvalue': {{ cart.total_price | money_without_currency | remove:',' }}
});
</script>
Prices with comma separator
<!-- Global site tag (gtag.js) - AdWords. Created by FeedArmy.com -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XX-XXXXXXXXX');
</script>
<script>
gtag('event', 'page_view', {
'send_to': 'XX-XXXXXXXXX',
'ecomm_pagetype': 'cart',
{% if cart.item_count > 1 %}
'ecomm_prodid': [{% for item in cart.items %}'shopify_GB_{{ item.product_id }}_{{ item.variant_id }}',{% endfor %}],
{% else %}
'ecomm_prodid': [{% for item in cart.items %}'shopify_GB_{{ item.product_id }}_{{ item.variant_id }}'{% endfor %}],
{% endif %}
'ecomm_totalvalue': {{ cart.total_price | money_without_currency | replace: ',', '.' }}
});
</script>
Step 8)
Add the remarketing code to the checkout thank you page
Click on Settings > Checkout, on the page scroll down to the section Order Processing
Important! :
- Change the XX-XXXXXXXXX three times with the value found in your downloaded script example gtag(‘config’, AW-123456798‘);
- <script async src=”https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXXX”></script>
- gtag(‘config’, ‘XX-XXXXXXXXX’);
- ‘send_to’: ‘XX-XXXXXXXXX’,
- Change the ecomm_prodid country code to yours.
- For example: if your store is in the US then change shopify_GB_ to shopify_US_
Prices with decimal separator
<!-- Global site tag (gtag.js) - AdWords. Created by FeedArmy.com -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XX-XXXXXXXXX');
</script>
<script>
gtag('event', 'page_view', {
'send_to': 'XX-XXXXXXXXX',
'ecomm_pagetype': 'purchase',
'ecomm_prodid': [{% for item in checkout.line_items %}'shopify_GB_{{ item.product_id }}_{{ item.variant_id }}',{% endfor %}],
'ecomm_totalvalue': {{ checkout.total_price | money_without_currency | remove:',' }}
});
</script>
Prices with comma separator
<!-- Global site tag (gtag.js) - AdWords. Created by FeedArmy.com -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XX-XXXXXXXXX');
</script>
<script>
gtag('event', 'page_view', {
'send_to': 'XX-XXXXXXXXX',
'ecomm_pagetype': 'purchase',
'ecomm_prodid': [{% for item in checkout.line_items %}'shopify_GB_{{ item.product_id }}_{{ item.variant_id }}',{% endfor %}],
'ecomm_totalvalue': {{ checkout.total_price | money_without_currency | replace: ',', '.' }}
});
</script>
Important Info (optional)
Important :
It is important that the product id matches that of the data feed, so if you are using the standard Shopify application or a tool that uses Shopify’s default id’s, then use the default code. If you are using the SKU or simply product ID as your identifier than please read below.
The below code replacement is for step 6 only
Change From :
{% if template contains 'product' %}
'ecomm_prodid': 'shopify_GB_{{ product.id }}_{% if product.variants.first.id %}{{ product.variants.first.id }}',{% else %}{{ product.variants.id }}',{% endif %}
{% endif %}
Using SKU’s as Product ID
If your product data feed uses SKU’s as product ID then change to :
{% if template contains 'product' %}
'ecomm_prodid': '{% if product.variants.first.id %}{{ product.variants.first.sku }}',{% else %}{{ product.variants.sku }}',{% endif %}
{% endif %}
Using the Simple Identifier as Product ID
If your product data feed uses simple identifiers as product ID then change to :
{% if template contains 'product' %}'ecomm_prodid': '{{ variant.id }}',{% endif %}
The below code replacement is for step 7 only
Change From :
{% if cart.item_count > 1 %}
‘ecomm_prodid’: [{% for item in cart.items %}’shopify_GB_{{ item.product_id }}_{{ item.variant_id }}’,{% endfor %}],
{% else %}
‘ecomm_prodid’: [{% for item in cart.items %}’shopify_GB_{{ item.product_id }}_{{ item.variant_id }}'{% endfor %}],
{% endif %}
Using SKU’s as Product ID
If your product data feed uses SKU’s as product ID then change to :
{% if cart.item_count > 1 %}
'ecomm_prodid': [{% for item in cart.items %}'{{ item.sku }}',{% endfor %}],
{% else %}
'ecomm_prodid': [{% for item in cart.items %}'{{ item.sku }}'{% endfor %}],
{% endif %}
Using the Simple Identifier as Product ID
If your product data feed uses simple identifiers as product ID then change to :
{% if cart.item_count > 1 %}
'ecomm_prodid': [{% for item in cart.items %}'{{ item.variant_id }}',{% endfor %}],
{% else %}
'ecomm_prodid': [{% for item in cart.items %}'{{ item.variant_id }}'{% endfor %}],
{% endif %}
The below code replacement is for step 8 only
Using SKU’s as Product ID
Change From :
'ecomm_prodid': [{% for item in checkout.line_items %}'shopify_GB_{{ item.product_id }}_{{ item.variant_id }}',{% endfor %}],
If your product data feed uses SKU’s as product ID then change the line for ecomm_prodid to the following
'ecomm_prodid':[{% for item in checkout.items %}'{{ item.sku}}',{% endfor %}],
Using the Simple Identifier as Product ID
If your product data feed uses simple identifiers as product ID then change the line for ecomm_prodid to the following
'ecomm_prodid':[{% for item in checkout.items %}'{{ item.variant_id }}',{% endfor %}],
Checking If It Works
Currently as of writing, Google Tag Assistant does not check which values are added in the gtag remarketing code, they should have this ready by next year. So you will need to look at the source code, to confirm.
Important!
Google Tag Assistant will show a red label if you have an ad blocker installed on your browser. Disable or remove the ad blocker to see a blue icon.
You can do this by right-clicking on the website then choose view page source and search for gtag (ctrl+f), then simply check the values that are added.
You should see something similar as below.
<!-- Global site tag (gtag.js) - AdWords: -->
<script async src="https://www.googletagmanager.com/gtag/js?id=xx-123456789123"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'xx-123456789123');
</script>
<script>
gtag('event', 'page_view', {
'send_to': 'xx-123456789123',
'ecomm_pagetype': 'product',
'ecomm_prodid': 'shopify_GB_132465798132_3132465179813',
'ecomm_totalvalue': 19.99
});
</script>
