Implement Q Pixel in Shopify

A comprehensive tagging strategy sets your campaign up for success and provides robust audience insights. The following instructions walk you through the process for placing Q Pixels in Shopify.

💡 Reminder:

Do not alter the code. Any edits to the code may result in the tag not firing.
The tag does not interfere with your page load because it is asynchronous (it loads in the background). See Get Started with Quantcast Tagging for more technical details.

⚠️ What you need to continue:

Q Pixel (tag code available in the Q Pixel app within the Quantcast Platform)
Conversion activity macros

In this Article:

Q Pixel in Shopify
Tagging Remaining for Shopify Site Activity
Verify Tag Implementation

Q Pixel in Shopify

1. Log in, and under Settings, select Checkout.

2. Navigate to the Additional Scripts text box.

3. Update the added variables placeholder with custom variable macros to pull in the corresponding information. The macros should be placed within single quotation marks.

This data allows Quantcast to refine optimizations, validate campaign performance, and share detailed insights. Common macros are listed below. More details may be found on Shopify’s Help Center.

Revenue: {{ total_price | money_without_currency | remove: ',' }}

Order ID: {{ order_number }}

4. We recommend adding an additional “Liquid If” statement around the Q Pixel to prevent the tracking of duplicate orders. This will ensure that the Q Pixel only fires the first time the order status page is accessed so that subsequent visits will not be considered additional conversions. To set this up, place Q Pixel between the Shopify Tags:

“{% if first_time_accessed %}” and “{% endif %}.”

See the example below:

{% if first_time_accessed %}

<!-- Start Quantcast Tag --> 

<script type="text/javascript"> window._qevents = window._qevents || []; (function() {var elem = document.createElement('script'); elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js"; elem.async = true;elem.type = "text/javascript"; var scpt = document.getElementsByTagName('script')[0]; scpt.parentNode.insertBefore(elem, scpt);})(); window._qevents.push({ qacct: "p-xxxxxxxxxxxxx", labels: "_fp.event.PageView"});window._qevents.push({qacct: "p-xxxxxxxxxxxxx",labels: "_fp.event.Purchase", orderid: '{{ order_number }}', revenue: '{{ total_price | money_without_currency | remove: ',' }}', event: "refresh"}); </script> 

<!-- End Quantcast tag -->

{% endif %}

5. Paste Q Pixel base code and conversion event snippet into the open text box.

6. Select Save.

Tagging Remaining for Shopify Site Activity

1. Navigate to Themes.

2. Under layout select “theme.liquid”.

3. Click the top right overflow button and select Edit HTML/CSS.

4. Paste the Q Pixel base tag before “</body>”.

5. Select Save.

For a resource on building Shopify themes, see Shopify's Cheat Sheet.

Verify Tag Implementation

The Quantcast Tag Inspector is a Google Chrome plugin that checks whether your Quantcast Tag and Audience Segments are implemented correctly. Install the Inspector to review individual pages of your site, and make sure the audience segments are firing correctly. For more information, see the Inspect Your Tag help document.

You are done! Please check the Q Pixel app to confirm that your tags are collecting data. If you are not seeing any activity, reach out to platform.support@quantcast.com or submit a Help Center request at www.quantcast.com. For more information on tagging, see our Tagging Overview article.

Additional instructions on Shopify:

Help Center - Implementing Order ID

Help Center - Revenue (Total Price)

Help Center - Returning Purchaser

Help Center - Run scripts only on first visit

Help Center - Conversion Tracking