Weekly Ecommerce Automation articles, videos and tips by Marcus Schappi.

📌 Setting up Pinterest Ad Tracking on Shopify

Published on 24 Feb 2020

Introduction

The Pinterest Advertising Platform

Pinterest offers an advertising system that Shopify merchants can use to advertise to their 250 million users.

Signup for pinterest Ads

To sign up for pinterest Ads visit https://ads.pinterest.com

Click the Get Started Button

Enter your email address and click ‘continue’

Once you’re logged in you’ll be presented with the dashboard

Scroll down until you can see the “Manage your ads” button and click it!

Set your currency (for me it is Australian Dollars) and click next.

Accept the “Advertising Agreement”

Click on “Ads” then “Conversions”

Click “Create pinterest Tag”

Make a note of your unique tag ID. In my case, it is 2613572227936, but yours will be unique.

If you want, give your Tag a Name

Log into the Shopify Admin

Click “Online Store”

Click “Themes”

Click “Actions”

Click “Edit Code”

Click “theme.liquid”

Scroll down the code to right before the closing head tag

Paste in the following code, and be sure to swap out the text “YOURTAGID” with your tag ID.

<script type="text/javascript">
!function(e){if(!window.pintrk){window.pintrk=function()
{window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version="3.0";var
t=document.createElement("script");t.async=!0,t.src=e;var
r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}}
("https://s.pinimg.com/ct/core.js"); 

pintrk('load','YOUR_TAG_ID', { em: '{{ customer.email }}', });
pintrk('page');
</script> 
<noscript> 
<img height="1" width="1" style="display:none;" alt=""
src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&noscript=1" /> 
</noscript>

In my case, my tag ID is 2613572227936, so my code will be:

<script type="text/javascript">
!function(e){if(!window.pintrk){window.pintrk=function()
{window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version="3.0";var
t=document.createElement("script");t.async=!0,t.src=e;var
r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}}
("https://s.pinimg.com/ct/core.js"); 

pintrk('load','2613572227936', { em: '{{ customer.email }}', });
pintrk('page');
</script> 
<noscript> 
<img height="1" width="1" style="display:none;" alt=""
src="https://ct.pinterest.com/v3/?tid=2613572227936&noscript=1" /> 
</noscript>

This is what it looks like when it is pasted in:

Whilst we’re here, we’ll add the “add to cart” button tracking. You’ll need to do this whereever you have “Add to Cart” buttons or links.

In the case of the Debut template, there is an “Add to Cart” button on the “product-template.liquid” section.

Click Sections.

Scroll down to “product-template.liquid” and click on the file.

Scroll down until you can find your “Add to Cart” button code.

Insert the code

onclick="pintrk('track', 'addtocart');"

into the “Add to Cart” button.

For example the code for my “Add to Cart” button is

<button type="submit" name="add" {% unless current_variant.available %} aria-disabled="true" {% endunless %} aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}" class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}" data-add-to-cart>
    <span data-add-to-cart-text>
        {% unless current_variant.available %}
        {{ 'products.product.sold_out' | t }}
        {% else %}
        {{ 'products.product.add_to_cart' | t }}
        {% endunless %}
    </span>
    <span class="hide" data-loader>
        {% include 'icon-spinner' %}
    </span>
</button>

I’d need to modify it to be as follows:

<button type="submit" name="add" {% unless current_variant.available %} aria-disabled="true" {% endunless %} aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}" class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}" data-add-to-cart onclick="pintrk('track', 'addtocart');">
    <span data-add-to-cart-text>
        {% unless current_variant.available %}
        {{ 'products.product.sold_out' | t }}
        {% else %}
        {{ 'products.product.add_to_cart' | t }}
        {% endunless %}
    </span>
    <span class="hide" data-loader>
        {% include 'icon-spinner' %}
    </span>
</button>

You can check if the code has been added by inspecting your “Add to Cart” button in your Web Browser.