Installing Tagely and ReferDigital on Shopify Sites: An Updated Guide And Things To Watch Out For

This post is an update of this one: Affiliate Tracking on Shopify: A Guide And Things To Watch Out For. In that original post, we explained how to integrate ReferDigital’s previous tracking pixel, which used an <img> html tag. ReferDigital no longer uses those pixels and now uses the more advanced and sophisticated Tagely tracking pixel instead.

This post explains how to integrate the Tagely pixel on Shopify sites (and this also updates how to integrate ReferDigital with Shopify too for those interested in affiliate marketing).

There are two steps to these installations:

Step 1:

Insert the Tagely base pixel code, which you can easily retrieve from your account homepage as soon as you login to Tagely, on every page of your Shopify site. In your Shopify admin homepage, go to “Online Store”, and then click on the three dots (…) next to Customize:

From the dropdown menu you see there, click “Edit Code”

On the next page, choose the “theme.liquid” file to edit. Insert the Tagely base pixel code before the closing </head> tag in the header of that file and click Save:

Step 2:

Install the tracking pixel base code AND the event code in the checkout “thank you” page.

To track conversions in Tagely, you need to set up Tagely events. See the Events Setup section of your Tagely account for more information on this. The same goes for ReferDigital, if you’re doing affiliate marketing, since ReferDigital also uses Tagely events. Tagely events need to be set up on your conversion page, which in the case of an ecommerce store like Shopify is the thank you page which appears after users finish their purchase.

The tricky part here is that Shopify uses a different template for its checkout pages and does not use the one you customized in Step 1 above. So you’ll need BOTH the Tagely base pixel code and the event code to be inserted there. Inserting just the event code won’t work – it won’t function without the base code.

Insert these in the Shopify “additional scripts” page, which you can find by searching for that phrase in your Shopify admin page using the searchbox at the top:

Click on that Post-purchase page link, then scroll down to the “Additional scripts” box and insert BOTH your Tagely base pixel code and the event code corresponding to a purchase in that box. Then click Save.

Here’s an example of what you’d insert for a Tagely event which is also in use for tracking a ReferDigital campaign:

<!-- Tagely base code -->
<script>!function(x,y,z){if(!x.tgl){var o=x.tgl=function(){o.exe?o.exe.apply(o,arguments):o.queue.push(arguments)};o.version='1.0',o.cl=90,o.queue=[],s=y.createElement(z),s.async=!0,s.src='https://tagely.com/scripts/tgl.js',a=y.getElementsByTagName(z)[0],a.parentNode.insertBefore(s,a)}}(window,document,'script');tgl('uid','XXX');</script>
<!-- End Tagely base code -->
<script>
tgl('purchase', {campaign_id: 'YYY', unique_id: '{{ checkout.id }}', order_total: '{{ checkout.total_price | money_without_currency }}'});
</script>

In the above code snippet, replace XXX with your Tagely user ID and YYY with your campaign ID from ReferDigital. The Tagely user ID is automatically populated for you with the correct value when you copy it from your Tagely account. (You will not need a ReferDigital campaign ID if you are only tracking conversions for the purpose of Tagely analytics and not doing affiliate marketing with ReferDigital.)

For an explanation of the other Shopify variables used in the event script above, see the previous article that we linked to at the top of this post.

As noted in that post, you should ensure that the tracking scripts are only loaded once for each converting visitor by enclosing everything in the Additional Scripts box in the following Shopify code:

{% if first_time_accessed %}

... tracking scripts go here ...

{% endif %}

In practice, even with this addition, we find that Shopify frequently reloads the same conversions for some reason. However, as shown in the example above, ReferDigital requires use of the unique_id parameter with Tagely purchase events. Tagely will automatically deduplicate events if this parameter is set. If correctly populated with a unique ID pertaining to each transaction, as it is in the example above where it is populated with the Shopify variable {{ checkout.id }}, Tagely (and thus ReferDigital) will only record one event per actual conversion, as desired.

And that’s it! Happy tracking!