Snapchat est une application gratuite permettant de partager des photos et des vidéos. Cette application est devenue au fil du temps une plateforme incontournable au même titre que Facebook et Google Ads.
Cette plateforme dispose également d’un outil d’analyse que l’on appel “Pixel” permettant de suivre vos campagnes publicitaires et d’améliorer grandement vos objectifs.
Qu’est ce que le pixel Snapchat ?
C’est un petit script qui va permettre de suivre les actions des internautes sur votre Boutique shopify.
Il a la capacité de détecter lorsque le client effectue les choses suivantes:
- Visite une page (Page View)
- Visite un contenu de type produit (Content View)
- Ajoute un article au panier (Add to Cart)
- Effectue un achat (Purchase)
La mise en place de ce tracker est un peu technique mais nous allons voir ensemble pas à pas comment procéder !
Comment installer le pixel SnapChat ?
Shopify ne proposant pas encore une intégration native nous allons devoir mettre les mains dans le cambouis. Mais pas d’inquiétude ça va bien se passer 🙂
Ou récupérer le Snap Pixel ?
Nous allons dans un premier temps nous connecter à l’espace publicitaire le fameux: Snapchat Ads Manager. L’idée est de trouver votre identifiant en cliquant en haut à gauche sur Sélectionnez Snap Pixel. Copiez l’identifiant Snapchat entouré dans l’exemple ci-dessous et sauvegardez le quelque part. Car nous allons en avoir besoin !
Comment intégrer le pixel sur sa boutique ?
C’est la partie la plus technique, vous allez devoir vous rendre dans plusieurs fichiers de votre thème shopify.
Pour commencer sur le tableau de bord de votre boutique shopify -> Boutique en ligne -> Bouton Actions -> Modifier le code.
Installer le script global et le Page View générique
Cliquez sur le dossier “Layout” et ouvrez le fichier “Theme.liquid”. Vous allez devoir identifiant la balise head et notamment sa fermeture </head>. Vous devez mettre le code ci-dessous à cet endroit.
N’oubliez surtout pas de remplacer les 2 identifiants d’exemple (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx) par votre identifiant précédemment sauvegardé. Respectez bien la syntaxe et laissez les apostrophes.
[pastacode lang=”markup” manual=”%3C!–%20start%20snap%20pixel%20–%3E%0A%3Cscript%20type%3D’text%2Fjavascript’%3E%0A(function(win%2C%20doc%2C%20sdk_url)%7B%0Aif(win.snaptr)%20return%3B%0Avar%20tr%3Dwin.snaptr%3Dfunction()%7B%0Atr.handleRequest%3F%20tr.handleRequest.apply(tr%2C%20arguments)%3Atr.queue.push(arguments)%3B%0A%7D%3B%0Atr.queue%20%3D%20%5B%5D%3B%0Avar%20s%3D’script’%3B%0Avar%20new_script_section%3Ddoc.createElement(s)%3B%0Anew_script_section.async%3D!0%3B%0Anew_script_section.src%3Dsdk_url%3B%0Avar%20insert_pos%3Ddoc.getElementsByTagName(s)%5B0%5D%3B%0Ainsert_pos.parentNode.insertBefore(new_script_section%2C%20insert_pos)%3B%0A%7D)(window%2C%20document%2C%20’https%3A%2F%2Fsc-static.net%2Fscevent.min.js’)%3B%0A%7B%25%20if%20customer.email%20!%3D%20blank%20%25%7D%0Asnaptr(‘init’%2C%20’xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx’%2C%20%7B’user_email’%3A%20’%7B%7B%20customer.email%20%7D%7D’%7D)%3B%0A%7B%25%20else%20%25%7D%0Asnaptr(‘init’%2C%20’xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx’)%3B%0A%7B%25%20endif%20%25%7D%0Asnaptr(‘track’%2C%20’PAGE_VIEW’)%3B%0A%3C%2Fscript%3E%0A%3C!–%20end%20snap%20pixel%20–%3E” message=”” highlight=”” provider=”manual”/]
Installer le Content View sur vos pages produits
Cliquez sur le dossier “Templates” et ouvrez le fichier “Product.liquid”. Tout en bas du fichier mettez le code ci-dessous.
[pastacode lang=”markup” manual=”%3Cscript%3E%0Asnaptr(‘track’%2C’VIEW_CONTENT’%2C%20%7B’currency’%3A%20’%7B%7Bshop.currency%7D%7D’%2C%20’price’%3A%20’%7B%7B%20product.price_min%20%7C%20money_without_currency%20%7C%20remove%3A’%2C’%20%7D%7D’%2C%20’item_ids’%3A’shopify_%20FR%20_%7B%7B%20product.id%20%7D%7D_%7B%7B%20product.variants.first.id%20%7D%7D’%20%7D)%3B%0A%3C%2Fscript%3E” message=”” highlight=”” provider=”manual”/]
Installer le Add to Cart au niveau du panier
Cliquez sur le dossier “Templates” et ouvrez le fichier “cart.liquid”. Tout en bas du fichier mettez le code ci-dessous.
[pastacode lang=”markup” manual=”%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Asnaptr(‘track’%2C%20’ADD_CART’%2C%20%7B%0A’currency’%3A%20’%7B%7Bshop.currency%7D%7D’%2C%0A’price’%3A%20%7B%7B%20cart.total_price%20%7C%20money_without_currency%20%7C%20remove%3A%20’%2C’%20%7D%7D%2C%0A’item_ids’%3A%20%5B%7B%25%20for%20item%20in%20cart.items%20%25%7D’%7B%7B%20item.variant.id%20%7D%7D’%7B%25%20unless%20forloop.last%20%25%7D%2C%20%7B%25%20endunless%20%25%7D%7B%25%20endfor%20%25%7D%5D%2C%0A%7D)%3B%0A%3C%2Fscript%3E” message=”” highlight=”” provider=”manual”/]
Installer le Purchase au niveau du paiement
Cette fois si rendez-vous non pas dans les fichiers du thème mais dans: Paramètres -> Passage à la caisse -> Section: Traitement des commandes – Scripts supplémentaires.
Dans le champ mettez le code suivant et remplacez l’identifiant d’exemple par votre identifiant !
[pastacode lang=”markup” manual=”%7B%25%20if%20first_time_accessed%20%25%7D%20%0A%3Cscript%20type%3D’text%2Fjavascript’%3E%0A(function(win%2C%20doc%2C%20sdk_url)%7B%0Aif(win.snaptr)%20return%3B%0Avar%20tr%3Dwin.snaptr%3Dfunction()%7B%0Atr.handleRequest%3F%20tr.handleRequest.apply(tr%2C%20arguments)%3Atr.queue.push(arguments)%3B%0A%7D%3B%0Atr.queue%20%3D%20%5B%5D%3B%0Avar%20s%3D’script’%3B%0Avar%20new_script_section%3Ddoc.createElement(s)%3B%0Anew_script_section.async%3D!0%3B%0Anew_script_section.src%3Dsdk_url%3B%0Avar%20insert_pos%3Ddoc.getElementsByTagName(s)%5B0%5D%3B%0Ainsert_pos.parentNode.insertBefore(new_script_section%2C%20insert_pos)%3B%0A%7D)(window%2C%20document%2C%20’https%3A%2F%2Fsc-static.net%2Fscevent.min.js’)%3B%0Asnaptr(‘init’%2C%20’xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx’%2C%20%7B’user_email’%3A%20’%7B%7B%20checkout.email%20%7D%7D’%7D)%3B%0Asnaptr(‘track’%2C%20’PURCHASE’%2C%20%7B’currency’%3A%20’%7B%7Bshop.currency%7D%7D’%2C%20’price’%3A%20’%7B%7Bcheckout.total_price%0A%7C%20money_without_currency%7D%7D’.replace(%22%2C%22%2C%22%22)%2C%20’transaction_id’%3A%20’%7B%7Bcheckout.order_id%7D%7D’%20%7D)%3B%0A%3C%2Fscript%3E%0A%7B%25%20endif%20%25%7D%20″ message=”” highlight=”” provider=”manual”/]
Mais comment savoir si tout est bien installé ?
Et bien c’est très simple ! nous allons installer l’extension chrome Snap Pixel Helper qui va nous permettre de vérifier que toutes les actions sont bien prises en compte.
Si l’intégration se passe bien vous devriez avoir en cliquant sur la petite cloche quelque chose comme ceci:
Il ne vous reste plus qu’à vous rendre sur une fiche produit afin de constater que le pixel affiche bien le “Content view”. Sur la page panier pour le “Add to Cart”. Par contre vous ne pourrez vérifier le “Purchase” que si vous effectuez une vraie transaction. Ou alors cliquer sur un achat existant pour atterrir sur la page Thank You et vous pourrez vérifier si l’événement est bien présent.
C’est terminé ! vous pouvez désormais analyser vos campagnes et exploser vos chiffres 😉
5 Responses
Je ne suis pas pro, mais il me semble que les codes “ATC” et ViewContent” sont inversé 🙂
Hello, effectivement un copiez/collez un peu trop rapide 🙂 c’est corrigé et merci pour cette remontée 😉
Bonjour,
Tout fontionne orrecctement sauf la partie purchase. Je l’ai inséré et en cliquant sur un achat existant pour obtenir la page thanks you, le plugin snap ne trouve pas le pixel achat.
Bonjour, vous pouvez essayez sur le dernier code de l’article. le code du purchase de supprimer la 1ere ligne et la dernière liqne et normalement ca devrait corriger votre problème.
{% if first_time_accessed %}et{% endif %}Bonjour, j’ai une préoccupation concernant la configuration du Purchase.
Actuellement sur Shopify, il est réservé deux champs pour les scripts supplémentaires: un champ pour les scripts supplémentaires de la page de statut de commande et un champ pour les scripts supplémentaires de la page après achat.
Svp je colle le code dans quel champ ?