Setup Google Ads conversion and re-marketing tags on Shopify store
How tags work
Think of tags as small scripts that are sitting on your website pages and fire on specific events that are important, for example, when an order is placed, a product is added to cart, or a potential customer show a product page.
So you can guess the target of these "fires": Google Ads. Each tag fires contain some information about the customer browser, together with the pages (or the products if it is an online store) that he browsed. Don't be too alerted about privacy yet, as the information is normally not enough to tell who the customer is. However, if the same browser on the same computer is used again, for example, to watch a Youtube video, Googles Ads will know, and it is all it need for it's business: advertising. Google will then be able to show the image of the product that the customer has added to cart yesterday.
Now you know how it works, you can understand why both conversion and re-marketing tags are so important if you are running Google Ads campaigns. Conversion tags give your Google Ads campaigns feedback about how it is doing. Both tags give Google information about the behavior of the potential customers on your stores, which products do they show and add to cart, so it can do effective re-marketing later on.
Installing conversion tag on Shopify store
First you need to create the tag in Google Ads, if you have not done so. You can do that by going to Tools & Settings > Measurements > Conversions. Click on the Add button to create a new conversion.
As we are installing the conversion on your Shopify store, choose Websites.
In the Category panel, select "Purchase". In the Value panel, select "Use different values for each conversion", because we will use some Liquid scripting to extract the order value to provide to the conversion tag later on. Leave the rest as default and click on "Create and Continue".
On the next screen, you can get the Conversion ID and the Conversion Label by clicking on "Use Google Tag Manager", although we are not going to use it.
Now, put the conversion Id and label into the following code snippets
<code>{% if first_time_accessed %} <script async src="https://www.googletagmanager.com/gtag/js?id=AW-CONVERSION_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-CONVERSION_ID'); gtag('event', 'page_view', { 'send_to': 'AW-CONVERSION_ID', 'ecomm_pagetype': 'purchase', 'ecomm_prodid': [{% for item in order.line_items %}'{{ item.product_id }}_{{ item.variant_id }}'{% unless forloop.last %},{% endunless %}{% endfor %}], 'ecomm_totalvalue': {{ order.subtotal_price | money_without_currency | remove: ',' }} }); gtag('event', 'conversion', { 'send_to': 'AW-CONVERSION_ID/CONVERSION_LABEL', 'value': {{ order.subtotal_price | money_without_currency | remove: ',' }}, 'currency': '{{ shop.currency }}', 'transaction_id': '{{ order.order_number }}' }); </script> {% endif %}
This script needs to go to the checkout settings in your Shopify admin. You do that by going to Settings > Checkout and paste it to the field "Additional scripts".
Your conversion tag is ready. Thanks to the Liquid scripting in the code, not only the conversion event is recorded, but also the ids of the products and the value of the order.
Installing the re-marketing tag on Shopify store
The re-marketing tag is a little bit more tricky to install. Since it need to record a lot of events, it need to be on almost every pages of your Shopify store. We will do that by adding it to the theme file.
First we need to add the re-marketing tag on Google Ads. Tools & Settings > Shared library > Audience manager > Audience sources
Make sure that Retail is selected. Do not select "User ID (include user ID parameters in the google ads tag)" as we will not be able to assign unique IDs to store visitors.
Make sure that all of the other Retail parameters, ecomm_pagetype, ecomm_prodid and ecomm_totalvalue are selected. We will be providing the values for them by some Liquid scripting later on.
Now, click "Save and Continue". On the next screen, click "Use Google Tag Manager" just to note down the Conversion ID to be used in the following code snippet.
<code><script async src="https://www.googletagmanager.com/gtag/js?id=AW-CONVERSION_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-CONVERSION_ID'); {% if template contains 'cart' %} gtag('event', 'page_view', { 'send_to': 'AW-CONVERSION_ID', ecomm_pagetype: 'cart', ecomm_prodid: [{% for item in cart.items %}'{{item.product_id}}_{{item.variant_id}}'{% unless forloop.last %}, {% endunless %}{% endfor %}], ecomm_totalvalue: '{{ cart.total_price | money_without_currency | remove: ',' }}' }); {% elsif template contains 'collection' %} gtag('event', 'page_view', { 'send_to': 'AW-CONVERSION_ID', ecomm_pagetype: 'category', ecomm_prodid: [{% for product in collection.products limit:5 %}'{{product.id}}_{{product.variants.first.id}}'{% unless forloop.last %}, {% endunless %}{% endfor %}], ecomm_category: '{{ collection.handle }}' }); {% elsif template contains 'index' %} gtag('event', 'page_view', { 'send_to': 'AW-CONVERSION_ID', ecomm_pagetype: 'home' }); {% elsif template contains 'product' %} gtag('event', 'page_view', { 'send_to': 'AW-CONVERSION_ID', ecomm_pagetype: 'product', ecomm_prodid: '{{product.id}}_{{product.variants.first.id}}', ecomm_totalvalue: '{{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}' }); {% elsif template contains 'search' %} gtag('event', 'page_view', { 'send_to': 'AW-CONVERSION_ID', ecomm_pagetype: 'searchresults', ecomm_prodid: [{% for product in search.results limit:5 %}{% if product.object_type == 'product' %}'{{product.id}}_{{product.variants.first.id}}'{% unless forloop.last %}, {% endunless %}{%endif%}{% endfor %}] }); {% else %} gtag('event', 'page_view', { 'send_to': 'AW-CONVERSION_ID', ecomm_pagetype: 'other' }); {% endif %} </script>
The code need to go to your Shopify theme.liquid file. Basically the theme.liquid is included in all of the pages of your Shopify store, and in the script we use Liquid to detect which page type it is (cart, product or category page) to provide information for the re-marketing tag.
To edit the theme.liquid file, go to Online Store > Themes > Actions > Edit code
Select theme.liquid from the panel on the left. Paste the code of for the re-marketing tag to right before the closing head tag (</head>)
Verify the re-marketing tag
To see the re-marketing tag in action, you need to use Chrome and have the extension "Tag Assistant" installed. Enable the extension and go to your store.
Go to a product page, and verify that the tag is firing the right value for the parameters ecomm_pagetype, ecomm_prodid and ecomm_totalvalue when applicable.
It is also important to check that the tag is working properly on the cart page, as abandoned cart data is very important for Google re-marketing.
If you reach this part of the post, you must be a serious user of Google Shopping / Google Ads. Then you know that good advertising starts with good product feeds. For that we have developed Multiple Google Shopping feeds, which does not only allow you to create feeds for Google Shopping, but also for Facebook Product Ads and Bing Shopping. The app embraces the new and advanced features of Shopify, including multilingual/ multi-currencies/ multi-domain store and allow you to create multilingual/multicurrency feeds for all the domains of your shop (what good is a multiple locale shop for if you cannot create ads in those locales). Even if you have not started to sell international, you will still be able to benefits from the ability to easily product segmentation, rule-based feed data building...
That is it. Thank you for reading.