Installer le pixel Snapchat sur Shopify (le guide facile)

Sommaire

Depuis sa sortie, Snapchat est devenue la plateforme incontournable pour les annonceurs avec ses millions d’utilisateurs actifs chaque jour. Et comme Facebook, ils ont développé un Pixel pour mesurer l’impact de vos campagnes publicitaires.

Campagnes publicitaires Snaptchat

Qu’est-ce que le pixel Snapchat ?

C’est un outil d'analyse qui va tracker les actions des visiteurs de votre site web.

Grâce à lui, vous pourrez analyser en temps réel le nombre de visites, les ajouts au panier, les achats et leurs valeurs, etc...

La plateforme étant encore jeune, l’installation de celui-ci est plus compliqué qu’avec son concurrent car vous devrez modifier le code du thème de votre boutique Shopify. Mais pas de panique ! Nous allons vous montrer pas à pas comment réussir son installation ! Vous aurez ainsi accès aux événements « PAGE VIEW », « PURCHASE », « ADD TO CART » et « VIEW CONTENT ».

Comment installer le pixel SnapChat ?

Étape 1 : générez votre Snap Pixel

Le Snap Pixel est un identifiant unique à votre compte.

Pour le trouver, connectez-vous à votre « Snapchat Ads Manager ». En haut à gauche, vous trouverez plein de fonctionnalités, parmi elles, sélectionnez « Snap Pixel ».

Cliquez sur « Set up Pixel », une fenêtre comme celle ci-dessous devrait apparaître.

Set up Pixel

Le code encadré en rouge est votre Snap ID, vous en aurez besoin pour la suite de ce tutoriel.

Étape 2 : installez le pixel sur votre boutique Shopify

Dans cette étape, vous allez copier-coller plusieurs lignes code dans différents endroits de votre boutique. Veillez à bien suivre les étapes.

Depuis votre tableau de bord Shopify, accédez à « Online Store » → « Actions » → « Edit code ».

Dans theme.liquid, collez le code ci-dessous avant la balise </head> ; en prenant soin de remplacer les 2 codes en rouge par votre Snap ID (sans retirer les apostrophes).

<!-- start snap pixel -->
<script type='text/javascript'>
(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');
{% endif %}
snaptr('track', 'PAGE_VIEW');
</script>
<!-- end snap pixel -->

Theme liquid

 Ensuite, trouvez cart.liquid et coller le code ci-dessous tout en bas.

<script type="text/javascript">
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 %}],
});
</script>

cart.liquid

Enfin, trouvez product-template.liquid (ou product.liquid) et copier encore une fois tout en bas le code ci-dessous.

<script>
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 }}' });
</script>

product-template.liquid

Vous nous suivez toujours ? Oui ? Sachez qu’il ne reste plus qu’une étape ! 

Pour ce faire, retournez dans votre tableau de bord Shopify et allez dans « Settings », « Checkout » puis collez ce code dans « Additional scripts ». Cette fois encore, remplacez le code écrit en rouge par votre Snap ID, tout en gardant les apostrophes.

{% if first_time_accessed %}
<script type='text/javascript'>
(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}}' });
</script>

{% endif %}

Additional scripts

Étape 3 : Vérifiez que tout est bien installé

Une fois que tout est bien installé, vous pouvez vérifier que tout fonctionne à merveille avec une simple extension Chrome : Snap Pixel Helper.

Installez-la sur votre navigateur Chrome et rendez-vous sur votre site, vos pages produits et le panier. Le raccourci de l’extension devrait s’allumer en jaune et mettre une petite notification.

Si vous cliquez dessus, une fenêtre comme celle-ci devrait apparaître :

Snap Pixel Helper

C’est bon ? Alors vous êtes prêt à lancer vos campagnes SnapChat maintenant que vous savez comment installer le pixel Snapchat sur Shopify !

Laissez un commentaire

Veuillez noter que les commentaires doivent être approvés avant d'être affichés