Pixel tracking will allow you to measure how many of your CTV ad viewers visit your website within the attribution window of your choice. In order to get accurate results, it is crucial to follow these implementation steps:
How to install the Vibe Pixel on Shopify for Page Views measurement
From the Shopify admin dashboard, select Online Store in the left-hand navigation menu. This will open a submenu.
Select Themes from the submenu.
On the Themes page, locate the current theme for your Shopify store. Find the theme to which you want to add the Vibe pixel and click on Actions ( three dots next to the Customize button.)
From the dropdown menu, select Edit Code. This will open the Shopify theme code editor.
In the theme code editor, you will find a list of files on the left-hand side. Select Theme.liquid to open the main template file.
Inside the Theme.liquid file, search for the closing </head> tag. This tag marks the end of the <head> section of your website.
Insert the provided web tracking code from your Vibe Measurement page just above the </head> tag.
Save Changes.
Test implementation.
a. Open the browser's developer console (usually accessible by right-clicking on the page and selecting Inspect or Inspect Element).
b. Switch to the Network tab in the developer console and check if there are any error messages related to the ad platform pixel. If no errors are displayed, the integration is successful.
How to install the Vibe Pixel on Shopify for Purchase measurement?
1. On your main admin page, click on Settings and scroll down to Checkout.
2. Once you have clicked on Checkout, scroll down to access the Order status page section.
3. Insert your Purchase pixel code from your Vibe Measurement page in the Additional scripts textbox, under the Order status page section.
⚠️ Don't forget to replace {'price_usd': 'INSERT_PRICE_HERE'} from the Vibe Purchase tag with the Shopify dynamic variable to have exact figures in your Vibe reporting, which is {'price_usd': {{ checkout.total_price | money_without_currency }}}
As a complete example, it should look like this:
<script>
!function(v,i,b,e,c,o){if(!v[c]){var s=v[c]=function(){s.process?s.process.apply(s,arguments):s.queue.push(arguments)};s.queue=[],s.b=1*new Date;var t=i.createElement(b);t.async=!0,t.src=e;var n=i.getElementsByTagName(b)[0];n.parentNode.insertBefore(t,n)}}(window,document,"script","https://s.vibe.co/vbpx.js","vbpx");
vbpx('init','FMyCfS');
vbpx('event','purchase', {'price_usd': {{ checkout.total_price | money_without_currency }}});
</script>
Note: you can also simply replace FMyCfS from the above code with the snippet of your own purchase tag to save time.
4. Save changes.
5. Test implementation as you did for the page_view example.
You can simulate a transaction through Shopify's Bogus Gateway to verify successful implementation.