Overview

Enabling Sonar on a headless Shopify site requires some additional development. By making the following adjustments to your Triple Pixel setup, you can ensure that every conversion event is captured and deduplicated properly inside of your ad platforms.

PLEASE NOTE:

Sonar setup for headless Shopify stores requires developer implementation.

Modifying the Triple Pixel Snippet on Headless Storefront Pages

Copy the most recent version of the headless snippet from the Pixel Settings page.
In the 5th row [the one that starts with window.TriplePixelData] you should edit the window.TriplePixelData variable and add product and search properties as below:
1. In the product variable, dynamically insert the product details for the current page
2. It should be an object with the following fields: id, name, price, variant. For example, the populated product object should look like the following:
3. ```
{
   id: '48269676624115',
   name: 'Top Knot Messy Bun Ponytail Holder',
   price: '42.99',
   variant: '8218652206806'
}
```
4. In the search variable, insert the query string (search term) of the user’s search
5. It should be a simple string contains the search sting term. For example:
  1. search: 'Ponytail Holder'
6. Note that these 2 fields (search and product) are optional. They should be configured to dynamically populate in scenarios where these values are present (on product pages, or after a user searches the website).
7. Also note that you can only pass one value for product per page and one value for search per page.
Place the updated snippet in the head of your HTML site files just as was done with the regular snippet.

Below is an example of how the window.TriplePixelData object should look after your implementation:

{

   TripleName: 'shop.myshopify.com',
   isHeadless: true,
   plat: 'SHOPIFY',
   product: {
       id: '48269676624115',
       name: 'Top Knot Messy Bun Ponytail Holder',
       price: '42.99',
       variant: '8218652206806'
   },
   search: 'Ponytail Holder',
   ver: '2.16'
}

For pages without a product and/or search scope, the object properties can be left blank, like the below example:

{
   TripleName: 'shop.myshopify.com',
   isHeadless: true,
   plat: 'SHOPIFY',
   product: {
       id: '',
       name: '',
       price: '',
       variant: ''
   },
   search: '',
   ver: '2.16'
}

Instructions for Single Page Applications (SPA)

To enable Sonar tracking for Single Page Applications (SPAs), you need to configure additional page view events manually and ensure the correct context is set for each event.

Choose from the following methods to ensure proper tracking in your SPA:

Option 1: Send Context with Manually Triggered Page View Events

When a visitor navigates to a new "page" in your SPA:

Instead of simply calling TriplePixel('pageLoad'), pass the relevant context data along with the event.

Example:

TriplePixel('pageLoad', {
    product: {
      id: '123456', 
      name: 'Top Knot Messy Bun Ponytail Holder', 
      price: '29.80', 
      variant: '098765345' 
   }, 
    search: 'braids', 
    collection: '012345678' 
});

This ensures that each page load event in your SPA includes any updated product, search, or collection context.

Option 2: Update the `window.TriplePixelData` Object Before Firing Additional Page Views

When a visitor views a new page in your SPA:

Update the window.TriplePixelData object with the relevant context (e.g., product or search details).
Trigger the page view event by calling TriplePixel('pageLoad').

Example:

window.TriplePixelData.product = { 
   id: '48269676624115', 
   name: 'Top Knot Messy Bun Ponytail Holder', 
   price: '42.99', 
   variant: '8218652206806' 
};

TriplePixel('pageLoad');

After firing the pageLoad event, ensure that you reset window.TriplePixelData to avoid passing outdated information.

Note: Choose the method that best fits your SPA setup. Both methods allow dynamic context to be captured accurately, ensuring that Sonar captures essential product and search details with each virtual page view.

Modifying the Triple Pixel Snippet on Headless Checkout

In addition to the regular snippet (as explained above) you must also trigger these events:

checkout_started
payment_info_submitted
purchase

Each of these events follows the same format. It is recommended you populate as many of the fields as possible, although, you may leave some fields empty for some of the events if you do not have access to the relevant information.

Here is an example of each checkout event:

Checkout Started:

TriplePixel('checkoutStarted', {
   eventId: 'n65N65',// That should be the eventId sent to other platforms
   email: 'user@email.com',
   phone: '1234567',
   firstName: 'First',
   lastName: 'Name',
   orderId: 'order_0000',
   cotkn: '121212121212',
   lineItems: ['3333333', '555555'],
   address: {
       zip: '67676',
       city: 'Sterling',
       countryCode: 'US',
       provinceCode: 'KS
   }
});

Payment Submitted:

TriplePixel('paymentSubmitted', {
   eventId: 'n65N65',// That should be the eventId sent to other platforms
   email: 'user@email.com',
   phone: '1234567',
   firstName: 'First',
   lastName: 'Name',
   orderId: 'order_0000',
   cotkn: '121212121212',
   lineItems: ['3333333', '555555'],
   address: {
       zip: '67676',
       city: 'Sterling',
       countryCode: 'US',
       provinceCode: 'KS
   }
});

Purchase:

TriplePixel('purchase', {
   eventId: 'n65N65',// That should be the eventId sent to other platforms
   email: 'user@email.com',
   phone: '1234567',
   firstName: 'First',
   lastName: 'Name',
   orderId: 'order_0000',
   cotkn: '121212121212',
   lineItems: ['3333333', '555555'],
   address: {
       zip: '67676',
       city: 'Sterling',
       countryCode: 'US',
       provinceCode: 'KS
   }
});

Add Contact Info:

TriplePixel('contactSubmitted', {
   eventId: 'n65N65',// That should be the eventId sent to other platforms
   email: 'user@email.com',
   phone: '1234567',
   firstName: 'First',
   lastName: 'Name',
   order_id: 'order_0000',
   cotkn: '121212121212',
   lineItems: ['3333333', '555555'],
   address: {
       zip: '67676',
       city: 'Sterling',
       countryCode: 'US',
       provinceCode: 'KS
   }
});

Add Address Info

TriplePixel('addressSubmitted', {
   eventId: 'n65N65',// That should be the eventId sent to other platforms
   email: 'user@email.com',
   phone: '1234567',
   firstName: 'First',
   lastName: 'Name',
   order_id: 'order_0000',
   cotkn: '121212121212',
   lineItems: ['3333333', '555555'],
   address: {
       zip: '67676',
       city: 'Sterling',
       countryCode: 'US',
       provinceCode: 'KS
   }
});

Add Shipping Info

TriplePixel('shoppingSubmitted', {
   eventId: 'n65N65',// That should be the eventId sent to other platforms
   email: 'user@email.com',
   phone: '1234567',
   firstName: 'First',
   lastName: 'Name',
   order_id: 'order_0000',
   cotkn: '121212121212',
   lineItems: ['3333333', '555555'],
   address: {
       zip: '67676',
       city: 'Sterling',
       countryCode: 'US',
       provinceCode: 'KS
   }
});

Sonar Setup for BigCommerce Shops (Beta)

Sonar Setup for WooCommerce Shops (Beta)