Are you promoting your Shopify products on X (Twitter) and cannot track the users who click them?
Such a waste.
Twitter has a superb reach, and the platform is used to run ads for your Shopify store.
But how could you attribute the conversions to this channel if you do not have the pixels installed?
In this blog, we explain why you need Twitter pixels in the first place and a step-by-step process to install them as well.
What Are Twitter Pixels and Why Do You Need Them?
Pixels are pieces of code embedded in your website to track users when they follow a link to arrive at your website.
X allows businesses to connect their X accounts with their Shopify stores and promote their products.
Setting up X pixels on their Shopify stores enables them to track the users acquired via this platform.
Learn about X (Twitter) Advertising here.
How to Setup Twitter Pixel on Your Shopify Store?
Installing the Twitter pixels can be a confusing but very straightforward process. Let us go over the stages one by one.
Install Base tag in Shopify
- Go to Shopify > Sales Channels > Online Store, click the three dots on the Current theme, and click Edit code from the popup.
- In the new window, click theme.liquid in the emerging code, and search for the head tag </head>.
- When you find </head>, place the cursor before it and enter to write your code.
- You will paste the event code from Twitter here.
Install the Add to Cart Code in Shopify
- Go to your product page, right-click the Add to Cart button, and click Inspect in the pop-up menu.
- In the code, look for the id property, something like “id=”add-to-cart-button”, and note the text within the quotation marks, as shown in the example.
- Go to Shopify > Sales Channels > Online Store, click the three dots on the Current theme, and click Edit code from the popup.
- In the new window, click theme.liquid, find the body tag </body>, and put the following code before that.
{% if template contains ‘product’ %}
<script>
//REPLACE HERE
var atcButtonID = “replace-this”;
var atcButton = document.getElementById(atcButtonID);
if(atcButton){
atcButton.addEventListener(“click”, function(event) {
var cartValue = {{ product.selected_or_first_available_variant.price }}/100;
var productId = {{ product.selected_or_first_available_variant.id }};
var productType = “{{ product.type }}”;
var currency = “{{ shop.currency }}”;
//PASTE AFTER HERE
});
}
</script>
{% endif %}
- In the highlighted line of code, instead of replace-this, type the id for the Add to Cart button from the second step in this sequence.
How to Install the Twitter Conversion Tag?
The Twitter pixel we are interested in installing to Shopify is called the Twitter Universal Tag. We will show you how to install it in the steps below.
- Go to Twitter Ads Manager > Tools > Conversion tracking.
- On the Conversion tracking page, click Create new conversation event.
- On the event page, create the tag, assign it a name, and skip the Select the type of conversion.
- Keep default for other options, agree to their Terms & Conditions, and click Save.
- Copy the code in the code box of the Create new conversation event page.
- Now, go to Shopify > Sales Channels > Online Store > Current theme, click Edit code, then theme.liquid, go to </head> and enter the code from the previous step before it.
Viola! Your Twitter tag can now track your users.
Create an Add to Cart Event
The whole point of installing the tag is to be able to follow users when they perform a desired action, preferably conversion.
For that purpose, we will create the Add to Cart Event.
- Go to Twitter Ads Manager > Tools > Conversion tracking > Create new conversion event, and give it a name (Add to Cart).
- Choose Custom in the Select the type of conversion, opt for Use a single event website tag, tick Create a tailored audience, and click Save conversion event.
- Now, go to Twitter Ads Manager > Tools > Conversion tracking, find the event you just created, find its tag ID, and copy it.
- Go back to Shopify > Sales Channels > Online Store > Current theme > Edit code > theme.liquid
- Go to the line of code //PASTE AFTER HERE : (highlighted in red), click enter after it, and paste the following code there
/*BEGIN TWITTER CODE*/
twttr.conversion.trackPid(“replace-this“, { tw_sale_amount: cartValue, tw_order_quantity: 1 });
/*END TWITTER CODE*/
- In the previous step, paste the tag ID from the Conversion tracking event (Add to Cart).
Congratulations, Twitter can receive your Add to Cart events from your Shopify store.
Create a Purchase Event
Finally, it is time to create a purchase event to track.
- Go to Twitter Ads Manager > Tools > Conversion tracking > Create new conversion event.
- Assign a name to the event (Purchase), choose Purchase in the Select type of conversion, opt for Use a single event website tag, check the Create a tailored audience box, and click Save conversion event.
- Copy the tag ID for the event.
- Go to Shopify > Home > Settings > Checkout, scroll down to Order processing, click the Additional scripts box, press enter, and paste the tag code from Twitter.
- Within the code, look for a line of code like
<script type=”text/javascript”>twttr.conversion.trackPid(‘o0wsm’, { tw_sale_amount: 0, tw_order_quantity: 0 });</script>
- In the section tw_order_quantity: 0, replace 0 with {{ order.total_price }}/100
You can now successfully track your purchases.
Conclusion
Twitter pixels help track the users that arrive at your Shopify store by clicking your ad on Twitter.
To install Twitter (X) pixels on your Shopify store, first, you need to install a Base tag in Shopify and then install an Add to Cart code.
Then, create a conversion event in Twitter Ads Manager and copy the code from the event to be pasted in your Shopify Online store.
Next, create an Add to Cart event in Twitter Ads Manager and install its code to the Shopify Online store.
Finally, create a Purchase event on Twitter, copy its tag ID, and install it in your Shopify Online store.
With the events created correctly and the codes right, the data should start flowing to your Twitter accounts.
Here you can integrate it with third-party analytical tools for further in-depth analysis.
Interested in learning more? Read our blogs here.
