Overview

Enabling Sonar on BigCommerce 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 BigCommerce stores requires developer implementation.

Modifying the Triple Pixel Snippet on Storefront Pages

Copy the most recent version of the Pixel 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.mybigcommerce.com',
isHeadless: true,
plat: 'bigcommerce',
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.mybigcommerce.com',
isHeadless: true,
plat: 'bigcommerce',
product: {
id: '',
name: '',
price: '',
variant: ''
},
search: '',
ver: '2.16'
}

Modifying the Triple Pixel Snippet on 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 Headless Shopify Stores

Sonar Setup for WooCommerce Shops (Beta)