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 Main 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 Customer Events.
2. Once you have clicked on Customer Events, click on Add Custom Pixel button, and name it. Then, click on Add pixel.
3.a. In the Code textbox, paste the code below, under // Step 1. Initialize the JavaScript pixel SDK (make sure to exclude HTML).
⚠️ Don't forget to replace the XXXXXX identifier below with your ID to successfully track your purchase events and ROAS. ⚠️
!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','XXXXXX');
3.b. Now, paste the code below, under // Step 2. Subscribe to customer events with analytics.subscribe(), and add tracking.
(You don't need to replace anything here. You can copy and paste it as is).
analytics.subscribe("checkout_completed", (event) => {
vbpx('event', 'purchase', {
'price_usd': event.data?.checkout?.totalPrice?.amount,
});
});
4. Once the two pieces of code have been pasted and the ID has been replaced with your own, click Save (top right corner) and then Connect (bottom right).
As a concrete example, this gives the following:
5. You can now see your Vibe purchase pixel with a Connected status.
6. Test implementation.
You can simulate a transaction through Shopify's Bogus Gateway to verify implementation.
