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.
If you need to implement manually on your Shopify website, it is crucial to follow these implementation steps:
The easiest way to install the Vibe Pixel on your Shopify site is through our dedicated app available in the Shopify app store. This method ensures all pixel events are set up correctly and efficiently.
How to install the Vibe Pixel using the Vibe Pixel app on Shopify
Set up a web tracker in Vibe
Open the Vibe app and navigate to the Web Tracking page from the Settings menu.
Click on “Set up a web tracker” and choose “Shopify” as the implementation method.
A form will appear displaying your unique pixel ID. Copy this ID as it will be needed shortly.
Click the provided button to be redirected to the Vibe Pixel app page on the Shopify app store.
Download the Vibe Pixel app in the Shopify app store
Click the Install button to install the Vibe Pixel app on your Shopify account.
Once the app is installed, paste your pixel ID into the dedicated field within the app.
Click the Verify button. If your pixel ID is verified successfully, the Vibe Pixel will be fully implemented on your website.
What to Expect After Installation
If the pixel ID is verified successfully, the Vibe Pixel is now live on your Shopify website.
Page Tracking: All page visits will be captured and appear as “page viewed” events in the Vibe app.
Lead Events: Add-to-cart actions will trigger a “lead” events.
Purchase Events: Successful checkout will trigger a "purchase" event.
If you need to install the Vibe Pixel manually, follow the instructions below.
How to install the Vibe Pixel manually 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 manually 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.
