Comment installer le Pixel Snapchat sur Shopify ?

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 !

ou trouver snapchat pixel id

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.

<!-- 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 -->

Comment installer pixel snapchat shopify

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.

<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>

Comment installer pixel snapchat content view shopify

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.

<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>

Comment installer pixel snapchat addtocart shopify

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 !

{% 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%} 

Comment installer pixel snapchat purcharse shopify

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:

Snap Pixel Helper Shopify

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 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

formation seo gratuite shopify

 

Une formation Gratuite SEO sur Shopify ça te tente ?

 

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

 

Commencer la formation