If you run a Shopify ecommerce website and would like to add either a Google DoubleClick Floodlight Remarketing (Retargeting) Tag or a Google DoubleClick Floodlight Conversion Tag then the short and detailed guide below will walk you through how to set them up easily within your Shopify theme and admin area.
If a digital marketing agency has asked you or your web developers to place the code on the website for them then they’ll probably have sent you some example code using placeholders for the variables they require.
How to add the DoubleClick Floodlight Remarketing Tag to Shopify:
The example (unedited) DoubleClick Floodlight Remarketing / Retargetting Tag will look something like this:
<!--
Start of DoubleClick Floodlight Tag: Please do not remove
Activity name of this tag: CLIENT NAME - Remarketing
URL of the webpage where the tag is expected to be placed: https://www.example.com
This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
Creation Date: 07/20/2016
-->
<script type="text/javascript">// <![CDATA[
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://0000000.fls.doubleclick.net/activityi;src=0000000;type=counter;cat=house0;u4=[product_name];u10=[page_url];u11=[product_catergory];u12=[Custom_1];u13=[Custom_2];u14=[SKU_ID];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
// ]]></script>
<noscript>
<iframe src="https://0000000.fls.doubleclick.net/activityi;src=0000000;type=counter;cat=house0;u4=[product_name];u10=[page_url];u11=[product_catergory];u12=[Custom_1];u13=[Custom_2];u14=[SKU_ID];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of DoubleClick Floodlight Tag: Please do not remove -->
Step 1: Edit your Liquid Theme file
Do this navigate to Online Store > Themes > Click on your main Liquid Theme file
Step 2: Identify and/or create your custom variables
To create the variables to automatically per-populate the Tag you would replace the placeholders with the following tags:
[Revenue] becomes {{transaction.amount}}
[product_name] becomes {{product.title}}
[page_url] becomes {{ current_url }}
[product_catergory] becomes {{product.type}}
[SKU_ID] becomes {{product.id}}
[OrderID] becomes {{transaction.id}}
Step 2: Create variables for the current_url
To create a current_url variable, so the tag knows which page the user was on, add the following just before the closing body tag </body> at the bottom of the file editor:
{% assign current_url = '' %}
{% case template %}
{% when 'page' %}
{% assign current_url = shop.url | append: page.url %}
{% when 'blog' %}
{% assign current_url = shop.url | append: blog.url %}
{% when 'article' %}
{% assign current_url = shop.url | append: blog.url %}
{% when 'collection' %}
{% assign current_url = shop.url | append: collection.url %}
{% when 'product' %}
{% assign current_url = shop.url | append: product.url %}
{% endcase %}
Note that the {{current_url}} variable is made in order to grab the URL in the noscript section ( when the user turns off javascript) and will not grab the cart URL and checkout URL. In order to grab the URL from the cart page and the checkout page we are going to make a new variable named newURL.
Step 3: Update your tag to include the variables
We can now swap the placeholders out with the correct Shopify variables or macros the Shopify DoubleClick Floodlight Remarketing Tag will need.
We can also, to keep things tidy, create a series or new variables, just based on existing liquid objects to better match the names used in the example tag code (including the page url, product name, product category and SKU number) which we’ve show below immediately under the opening javascript tag:
<script type="text/javascript">
var page_url = {{current_url|json}}
var product_name = {{product.title|json}}
var product_category = {{product.type|json}}
var SKU_ID = {{product.id|json}}
var newURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://0000000.fls.doubleclick.net/activityi;src=0000000;type=counter;cat=house0;u4=' + product_name + ';u10=' + newURL + ';u11=' + product_category + ';u12=[Custom_1];u13=[Custom_2];u14=' + SKU_ID + ';dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
<iframe src="https://0000000.fls.doubleclick.net/activityi;src=0000000;type=counter;cat=house0;u4={{product.title}};u10={{ current_url }};u11={{product.type|json}};u12=[Custom_1];u13=[Custom_2];u14={{product.id|json}};dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of DoubleClick Floodlight Tag: Please do not remove -->
Step 4: Add the remarketing tag to Shopify
Once you swap these placeholders out with the correct Shopify variables or macros the Shopify DoubleClick Floodlight Remarketing / Retargeting Tag will finally look like the following:
To add your DoubleClick ready conversion tag into your shopify theme, simply:
- Paste the code above between the current_url you added from step 2 and the closing body tag </body>
- Click Save
You can test your setup or ask your digital agency to do this for you.
How to add the DoubleClick Floodlight Conversion Tag to Shopify:
The example (unedited) DoubleClick Floodlight Conversion Tag it will look something like this:
<!-- Start of DoubleClick Floodlight Tag: Please do not remove Activity name of this tag: CLIENT NAME - Conversion URL of the webpage where the tag is expected to be placed: https://www.example.com This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag. Creation Date: 07/20/2016 --> <iframe style="display: none;" src="https://0000000.fls.doubleclick.net/activityi;src=0000000;type=sale;cat=house0;qty=1;cost=[Revenue];u4=[product_name];u10=[page_url];u11=[product_catergory];u12=[Custom_1];u13=[Custom_2];u14=[SKU_ID];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=[OrderID]?" width="1" height="1" frameborder="0"></iframe> <!-- End of DoubleClick Floodlight Tag: Please do not remove -->
Step 1: Create your custom variables
If you have not added a remarketing tag as per above then complete Step 2 from the previous section in order to produce a current_url capture variable. If you’ve already done that then move on to Step 2 below.
Step 2: Update your tag to include the variables
Once you swap these placeholders out with the correct Shopify variables or macros the Shopify DoubleClick Floodlight Conversion Tag will finally look like the following:
<!--
Start of DoubleClick Floodlight Tag: Please do not remove
Activity name of this tag: CLIENT NAME - Conversion
URL of the webpage where the tag is expected to be placed: https://www.example.com
This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
Creation Date: 07/20/2016
-->
<iframe style="display: none;" src="https://0000000.fls.doubleclick.net/activityi;src=0000000;type=sale;cat=house0;qty=1;cost={{transaction.amount}};u4={{product.title}};u10={{ current_url }};u11={{product.type}};u12=[Custom_1];u13=[Custom_2];u14={{product.id}};dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord={{transaction.id}}?" width="1" height="1" frameborder="0"></iframe>
<!-- End of DoubleClick Floodlight Tag: Please do not remove -->
Step 3: Add the conversion tag to Shopify
To add your DoubleClick ready conversion tag into your shopify theme, simply:
- Go to settings in your Shopify admin area
- Click on checkout
- Insert your conversion tag in the Additional Scripts box and click Save
You can test your setup or ask your digital agency to do this for you.
If you need any help with Shopify development or with your online marketing please get in touch.