Install Snapchat Pixel on Shopify (The Easy Guide)

Summary

Since its release, Snapchat has become the essential platform for advertisers with its millions of active users every day. And like Facebook, they've developed a pixel to measure the impact of your advertising campaigns.

Snaptchat advertising campaigns

What is the Snapchat pixel?

It is an analysis tool that will track the actions of visitors to your website.

Thanks to it, you will be able to analyze in real time the number of visits, the additions to cart, purchases and their valuesEtc. ...

The platform is still young, the installation of this one is more complicated than with its competitor because you will have to modify the code of the theme of your Shopify store. But do not panic ! We will show you step by step how to successfully install it! You will thus have access to the events " VIEW PAGE "," PURCHASE "," ADD TO CART "and" VIEW CONTENT ".

How to install the SnapChat pixel?

Step 1: generate your Snap Pixel

Le Snap Pixel is a unique identifier for your account.

To find it, connect to your " Snapchat Ads Manager ". At the top left you will find plenty of features, among them select " Snap Pixel ».

Click on " Set up Pixel ”, A window like the one below should appear.

Set up Pixel

The code framed in red is your Snap ID, you will need it for the rest of this tutorial.

Step 2: install the pixel on your Shopify store

In this step, you will copy and paste several lines of code in different places of your store. Be sure to follow the steps carefully.

From your Shopify dashboard, navigate to " Online Store "→" Actions "→" Edit code ».

Dance theme.liquid, paste the code below before the tag ; taking care to replace the 2 codes in red with your Snap ID (without removing the apostrophes).



(function (win, doc, sdk_url) {
if (win.snaptr) return;
var tr = win.snaptr = function () {
tr.handleRequest? tr.handleRequest.apply (tr, arguments): tr.queue.push (arguments);
};
tr.queue = [];
var s = 'script';
var new_script_section = doc.createElement (s);
new_script_section.async =! 0;
new_script_section.src = sdk_url;
var insert_pos = doc.getElementsByTagName (s) [0];
insert_pos.parentNode.insertBefore (new_script_section, insert_pos);
}) (window, document, 'https://sc-static.net/scevent.min.js');
{% if customer.email! = blank%}
snaptr ('init', 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', {' user_email ':' {{customer.email}} '});
{% else%}
snaptr ('init', 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx') ;dropoff Window
{% endif%}
snaptr ('track', 'PAGE_VIEW');

Theme liquid

 Then find liquid cart and paste the code below at the very bottom.


snaptr ('track', 'ADD_CART', {
'currency': '{{shop.currency}}',
'price': {{cart.total_price | money_without_currency | remove: ','}},
'item_ids': [{% for item in cart.items%} '{{item.variant.id}}' {% unless forloop.last%}, {% endunless%} {% endfor%}],
});

liquid cart

Finally, find product-template.liquid (or product.liquid) and copy the code below once again at the bottom.


snaptr ('track', 'VIEW_CONTENT', {'currency': '{{shop.currency}}', 'price': '{{product.price_min | money_without_currency | remove:', '}}', 'item_ids' : 'shopify_ FR _ {{product.id}} _ {{product.variants.first.id}}'});

product-template.liquid

Are you still following us? Yes ? Know that there is only one step left! 

To do this, go back to your Shopify dashboard and go to " Settings "," Checkout "Then paste this code in" Additional scripts ". This time again, replace the code written in red with your Snap ID, while keeping the apostrophes.

{% if first_time_accessed%}

(function (win, doc, sdk_url) {
if (win.snaptr) return;
var tr = win.snaptr = function () {
tr.handleRequest? tr.handleRequest.apply (tr, arguments): tr.queue.push (arguments);
};
tr.queue = [];
var s = 'script';
var new_script_section = doc.createElement (s);
new_script_section.async =! 0;
new_script_section.src = sdk_url;
var insert_pos = doc.getElementsByTagName (s) [0];
insert_pos.parentNode.insertBefore (new_script_section, insert_pos);
}) (window, document, 'https://sc-static.net/scevent.min.js');
snaptr ('init', 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', {' user_email ':' {{checkout.email}} '});
snaptr ('track', 'PURCHASE', {'currency': '{{shop.currency}}', 'price': '{{checkout.total_price
| money_without_currency}} '. replace (",", ""),' transaction_id ':' {{checkout.order_id}} '});


{% endif%}

Additional scripts

Step 3: Make sure everything is installed correctly

Once everything is well installed, you can verify that everything is working fine with a simple Chrome extension: Snap Pixel Helper.

Install it on your Chrome browser and go to your site, your product pages and the cart. The extension's shortcut should light up yellow and put a little notification.

If you click on it, a window like this should appear:

Snap Pixel Helper

Its good ? So you are ready to launch your SnapChat campaigns now that you know how to install Snapchat pixel on Shopify !

Leave a comment

Please note that comments must be approved before posting