Balisage côté serveur pour Shopify

Êtes-vous à la recherche d’un moyen simple et rapide de configurer le balisage côté serveur pour Shopify ? Ne cherchez pas plus loin que l’application Stape Conversion Tracking pour Shopify. Avec notre application, vous pouvez facilement insérer un script Web Google Tag Manager sur le site Web, configurer un domaine personnalisé et un Custom Loader, envoyer des données d’événement utilisateur et d’e-commerce à la couche de données et configurer des webhooks. Toutes ces fonctionnalités vous aideront à rendre le suivi plus précis en prolongeant la durée de vie des cookies, en rendant le suivi du navigateur résistant aux technologies de prévention du suivi et en envoyant des données fiables aux plateformes de publicité et de marketing via le point de terminaison du serveur.

Dans cet article de blog, nous découvrirons comment configurer et installer l’application Stape pour Shopify afin de vous permettre d’utiliser ces puissantes fonctionnalités sans délai.

Le balisage côté serveur peut accélérer le succès de vos campagnes marketing grâce à un suivi précis des conversions et à une analyse des utilisateurs. Cependant, pour en tirer pleinement parti, il faut une configuration minutieuse, ce que personne ne devrait négliger.

Pour rendre la mise en œuvre du balisage côté serveur aussi simple que possible, nous avons créé une application Shopify Server GTM. Cette application est gratuite et permet de configurer facilement le conteneur serveur Google Tag Manager pour la boutique Shopify. Mais tout d’abord, parlons des principaux avantages du balisage côté serveur pour les sites Shopify.

1. Meilleure précision des données. Le balisage côté serveur peut contribuer à garantir une collecte de données plus précise en réduisant le risque de perte de données ou d’erreurs causées par des bloqueurs de publicités, des extensions de navigateur ou d’autres facteurs côté client.

2. Attribution précise des conversions. Grâce à la durée de vie accrue des cookies et aux données utilisateur envoyées via le serveur, les réseaux d’annonceurs peuvent attribuer plus précisément les conversions aux campagnes marketing.

3. Amélioration des performances du site Web. Avec le balisage côté serveur, les balises sont chargées sur le serveur plutôt que côté client, ce qui réduit la quantité de code à charger sur le navigateur de l’utilisateur. Cela peut améliorer la vitesse de chargement du site Web, ce qui est crucial pour l’expérience utilisateur et le SEO.

4. Sécurité renforcée. Le balisage côté serveur peut contribuer à améliorer la sécurité du site Web en réduisant le risque de violation de données ou d’autres menaces de sécurité causées par des vulnérabilités côté client.

Développez l'élément ci-dessous pour accéder au guide détaillé.

L'application Stape's Conversion Tracking pour Shopify peut être installée gratuitement depuis la boutique Shopify.

L'onglet General regroupe tous les paramètres liés à l'insertion du snippet GTM sur l'ensemble des pages de votre boutique Shopify, de manière à le rendre résistant aux bloqueurs de publicités, à l'ITP et aux limitations de durée des cookies.

• Use Shopify Markets

Cochez cette case si vous gérez plusieurs marchés Shopify. Cette fonctionnalité vous permet de configurer l'injection GTM séparément pour chaque marché. Si elle est désactivée, tous les marchés utilisent la configuration par défaut.

Une fois activée, les champs suivants apparaissent pour chaque marché :

• Insert GTM : si coché, le snippet GTM est ajouté à toutes les pages du site.

• GTM container ID : l'identifiant de votre conteneur web GTM.

• Customer privacy API : si activé, l'application retient le chargement de GTM jusqu'à ce que le visiteur accepte les cookies via la bannière Customer Privacy de Shopify. Cette option n'est pas recommandée par défaut.

• Custom domain, Stape container ID et Cookie Keeper : ces champs sont liés au tracking côté serveur ; configurez-les si vous utilisez ou prévoyez d'utiliser la configuration server-side. Nous expliquons ci-dessous où trouver les valeurs correspondantes.

• GTM web container ID

Indiquez ici l'identifiant de votre conteneur web GTM.

• Custom domain

Il est primordial d'utiliser votre propre sous-domaine pour que les cookies first-party fonctionnent correctement et que le tracking soit pleinement opérationnel. Si vous n'avez pas encore ajouté de sous-domaine à votre conteneur sGTM, suivez le guide sur les domaines personnalisés pour le faire.

• Custom Loader

Son utilisation est fortement recommandée pour renforcer la protection contre les bloqueurs de publicités.

Cochez la case correspondante et renseignez l'identifiant de votre conteneur Stape. Pour le trouver, connectez-vous à votre compte Stape, sélectionnez le conteneur sGTM et repérez l'identifiant du conteneur dans la section Settings.

• Cookie Keeper

Cette fonctionnalité vous permet de minimiser l'impact des dernières restrictions ITP. Avant de l'activer via l'application, assurez-vous de l'avoir activée dans Stape sur votre conteneur. Pour configurer Cookie Keeper, cliquez sur l'élément déroulant et suivez les instructions :

• GTM snippet block

Vous pouvez y récupérer le snippet GTM pour l'installer sur des pages qui sont en dehors de votre thème Shopify (comme les pages créées par des applications tierces telles que Zipify).

L'onglet Data Layer vous permet d'activer et de configurer les événements de couche de données. La deuxième zone vous permet de contrôler si les noms d'événements reçoivent le suffixe _stape  afin d'éviter les conflits dans GTM. Si cette option est désactivée, les événements conservent leurs noms d'origine.

Vous y trouverez la liste complète des événements et leurs données associées, ajoutés via l'application Stape.

Activation de la Data layer :

• Cochez la case Add ecommerce Data Layer events.
• Enregistrez les modifications.
• Copiez le code du pixel personnalisé affiché dans le cadre situé en bas de l'onglet Data Layer et suivez les instructions pour l'ajouter et l'activer.

Dans la section Customer privacy, sous le menu déroulant des autorisations, veillez à sélectionner Not required. Le snippet de code se contente de générer la couche de données ; il ne dépose aucun cookie et ne transmet aucune donnée à des tiers.

L'onglet Data Layer propose également l'option Log events to console (Dev), un outil de débogage à destination des développeurs et des administrateurs de boutiques. Lorsqu'elle est activée, elle enregistre les événements e-commerce dans la console du navigateur, affiche les données des événements envoyés au conteneur serveur GTM/Stape pour vérification, et facilite le débogage des couches de données.

Cette option est réservée au développement et doit être désactivée en production afin d'éviter des journaux inutiles dans la console.

Les événements webhook sont configurés dans l'onglet Webhook.

Cet onglet permet de configurer les événements webhook.

Pour activer un webhook, cochez la case correspondante, renseignez l'URL du conteneur serveur GTM et le /path vers lequel les webhooks doivent être envoyés.

Vous pouvez vous abonner aux webhooks lors de la création d'une nouvelle commande ou lors d'un remboursement.

Quelques articles de blog utiles sur l'utilisation et le débogage des webhooks :

• Qu’est-ce que c’est des webhooks et leur utilisation dans le suivi côté serveur
• Déboguer les webhooks entrants dans la prévisualisation du serveur Google Tag Manager
• Tracking serveur à serveur dans Google Tag Manager server

Il vous permet de remplir et de mettre à jour automatiquement les listes Customer Match dans Google Ads.

Ignorez la configuration de cet onglet si vous ne diffusez pas de campagnes Google Ads ou n'utilisez pas de listes Customer Match.

Le conteneur serveur n’a pas d’accès direct aux données côté navigateur – telles que la couche de données, les cookies ou le contexte de la page – ; ces données doivent donc être envoyées explicitement depuis le conteneur web. Deux méthodes sont disponibles à cet effet :

• Data Tag, associé à Data Client dans le conteneur serveur pour recevoir et analyser ses requêtes, envoie les variables de la couche de données et d’autres paramètres indépendamment de toute plateforme spécifique ;
• Google Analytics 4, qui envoie les données via un Google Tag configuré avec l'URL du conteneur serveur. Ces deux méthodes sont décrites ci-dessous.

Étape 1. Installez le modèle Data Tag :

1. 1.
   Cliquez sur le menu Tags.
2. 2.
   Cliquez sur Nouveau.
3. 3.
   Ouvrez la section Modèles de votre conteneur Google Tag Manager web → ajoutez Data Tag depuis la galerie de modèles.
4. 4.
   Cliquez sur l’onglet Configuration de la balise.
5. 5.
   Cliquez sur Découvrir d’autres types de balises dans la galerie de modèles de la communauté → recherchez Data Tag → cliquez sur Ajouter à l’espace de travail → cliquez sur Ajouter.

Étape 2. Ensuite, nous allons configurer Data Tag pour l’événement « pageview » :

1. 1.
   Sous Nom de l’événement, vous pouvez sélectionner un nom d’événement standard, ajouter un nom d’événement personnalisé ou ajouter un nom d’événement dynamique à l’aide de la variable {{Event}}.
2. 2.
   Saisissez votre URL côté serveur GTM (vous pouvez trouver votre URL côté serveur GTM dans votre compte stape.io en ouvrant le conteneur sGTM et en consultant la section Domaine.)
3. 3.
   Cochez la manière dont vous souhaitez que les données soient envoyées :

   1. 3.1.
      Envoyer tout depuis la couche de données : enverra toutes les informations présentes dans la couche de données GTM web vers les données d’événements GTM côté serveur.
   2. 3.2.
      Envoyer les données communes — ajoute à la requête les champs page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution et viewport_size.
   3. 3.3.
      Ajouter l’état de consentement — ajoute l’objet consent_state à la requête. Il comprend les propriétés suivantes : ad_storage, analytics_storage, functionality_storage, personalization_storage et security_storage.
   4. 3.4.
      Ajouter un cookie commun : la balise enverra des cookies communs dans eventData afin de contourner certaines limitations des plateformes de commerce électronique. Cela est par exemple nécessaire pour les événements qui fonctionnent sur les pages de paiement de Shopify.
4. 4.
   Sous Données d’événement, vous pouvez ajouter manuellement des données à la requête. Vous pouvez également appliquer des transformations (comme le hachage, le tronquage, etc.) ou stocker des données.
5. 5.
   Sous Données utilisateur, vous pouvez envoyer des paramètres utilisateur et appliquer des transformations ou stocker des données.
6. 6.
   Sous Paramètres et Paramètres avancés, vous trouverez exactement cela : des options de configuration avancées. À moins de savoir exactement ce que vous faites, il est préférable de ne pas modifier ces paramètres.
7. 7.
   Donnez un nom descriptif à votre balise et cliquez sur Enregistrer.

Étape 3. Vous pouvez ensuite configurer Data Tag pour d’autres événements. L’exemple ci-dessous montre comment configurer des événements de commerce électronique lorsque Data Layer est disponible.

Cette balise déclenche chaque événement de commerce électronique dans la couche de données. Dans cet exemple, tous les événements de commerce électronique se terminent par _stape ; nous utilisons donc une expression régulière qui inclut tous les événements contenant _stape.

Exemple de variable permettant d’extraire les données utilisateur de la couche de données.

Étape 4. Ensuite, téléchargez Data Client depuis GitHub :

1. 1.
   Suivez ce lien.
2. 2.
   Cliquez sur Code → Télécharger le fichier ZIP.

Étape 5. Maintenant, importez Data Client :

1. 1.
   Ouvrez votre conteneur Google Tag Manager serveur.
2. 2.
   Cliquez sur Modèles.
3. 3.
   Sous Clients, cliquez sur Nouveau.
4. 4.
   Cliquez sur les trois points dans le coin supérieur droit.
5. 5.
   Cliquez sur Importer et sélectionnez le client de données que vous avez téléchargé depuis GitHub (vous devrez peut-être d'abord décompresser l'archive).
6. 6.
   Une fois l’importation terminée, cliquez sur Enregistrer.

Étape 6. Ouvrez l’onglet Clients et cliquez sur Nouveau → choisissez Data Client → cliquez sur Enregistrer.

Étape 7. Ouvrez les écrans d’aperçu GTM Web et Serveur et testez la configuration. Vous devriez voir Data Tag se déclencher dans le conteneur GTM Web et Data Client analyser les requêtes Data Tag dans le sGTM.

Étape 1. Créez une variable de configuration pour l’URL du conteneur serveur. Pour ce faire :

1. 1.
   Cliquez sur le menu Variables.
2. 2.
   Cliquez sur Nouveau sous la barre Variable définie par l’utilisateur.
3. 3.
   Cliquez sur la barre Configuration des variables.
4. 4.
   Sélectionnez le type Balise Google : Paramètres de configuration.
5. 5.
   Cliquez sur Ajouter un paramètre.
6. 6.
   Saisissez les paramètres suivants :

   1. 6.1.
      Paramètre de configuration : server_container_url.
   2. 6.2.
      Valeur : l’URL de votre conteneur serveur Tag Manager.
7. 7.
   Donnez un nom descriptif à votre variable et cliquez sur Enregistrer.

Étape 2. Créez une balise Google Analytics 4 :

1. 1.
   Cliquez sur le menu Balises.
2. 2.
   Cliquez sur Nouveau.
3. 3.
   Cliquez sur l’onglet Configuration de la balise.
4. 4.
   Sélectionnez Google Analytics → Balise Google.
5. 5.
   Sous ID de balise, saisissez l’ID de votre compte GA4 (pour le trouver, accédez à votre compte GA4 → cliquez sur Administration → Flux de données → sélectionnez le flux → consultez l’ID de mesure).
6. 6.
   Sous Paramètres de configuration, sélectionnez la variable du conteneur serveur que vous avez créée précédemment.
7. 7.
   Sous Déclenchement, assurez-vous que l’option Initialisation - Déclencheur toutes les pages est sélectionnée.
8. 8.
   Donnez un nom descriptif à votre balise et cliquez sur Enregistrer.
9. 9.
   Cliquez sur Publier pour que le conteneur soit mis en ligne.

Étape 3. Voyons ensuite comment créer un événement GA4, en prenant l’événement « Tous les clics » comme exemple :

1. 1.
   Cliquez sur le menu Balises.
2. 2.
   Cliquez sur Nouveau.
3. 3.
   Cliquez sur l’onglet Configuration de la balise.
4. 4.
   Sélectionnez Google Analytics → Google Analytics : Événement GA4.
5. 5.
   Saisissez votre ID de mesure (issu du menu Flux de données de GA4).
6. 6.
   Donnez un nom descriptif à votre événement.
7. 7.
   Cliquez sur Déclenchement → Tous les clics.
8. 8.
   Donnez un nom descriptif à la balise.
9. 9.
   Cliquez sur Enregistrer.

Vous devrez ensuite configurer l’envoi de vos données d’événement vers votre plateforme de marketing ou d’analyse. Les étapes exactes dépendront de la plateforme que vous aurez choisie. Consultez nos guides sur les plateformes les plus courantes pour plus d’informations :

• Comment configurer l’API Meta Conversions
• Comment configurer le suivi Google Analytics 4 (GA4)
• Comment configurer le suivi des conversions Google Ads
• Autres plateformes

La plupart des outils marketing et analytiques populaires prennent déjà en charge le tagging côté serveur et disposent de tags pour sGTM. Vous trouverez des guides de mise en œuvre sur notre site, notamment pour Facebook CAPI, TikTok Events API, Snapchat Conversions API, le tracking côté serveur Google Ads, etc.

Débogage du chargement GTM

Après l'activation ou toute modification, il est recommandé de vérifier que votre conteneur est bien chargé sur le site.

Pour ce faire, rendez-vous sur n'importe quelle page de votre site, ouvrez la console de votre navigateur et, dans l'onglet réseau, filtrez par l'URL de votre sous-domaine ou de votre serveur de tagging. Vous devriez voir une requête similaire à la capture d'écran ci-dessous avec un code de réponse 200.

Débogage des événements de la couche de données au checkout

Pour les événements survenant avant la page de checkout, tout fonctionne comme sur n'importe quelle autre plateforme : vous pouvez lancer le mode prévisualisation de votre conteneur web GTM et retrouver tous les événements.

Les événements de checkout ne s'affichent pas dans GTM Preview en raison de l'environnement isolé de ces pages, qui bloque toute manipulation du DOM et toute injection de script non restreinte, y compris le snippet GTM.

Vous pouvez toutefois insérer manuellement le snippet sur la page de checkout à l'aide de l'extension Chrome Stape GTM Helper :

1. 1.
   Après avoir lancé le Mode Preview dans GTM, activez le bouton Shopify Sandbox dataLayer dans l'onglet Settings de l'extension.
2. 2.
   Dans l'onglet Inject GTM, cliquez sur Enable injection, ajoutez votre nom de domaine et votre GTM ID. Enregistrez les modifications.

Les événements de la page de checkout s'afficheront désormais dans GTM Preview.

Les possibilités de balisage côté serveur se développent rapidement, offrant à l’utilisateur un excellent outil pour améliorer la précision du suivi et de l’analyse des conversions. De plus, Stape s’évertue à simplifier l’utilisation de sGTM pour nos clients. C’est pourquoi nous lançons l’application Conversion Tracking pour Shopify.

Le Stape Conversion Tracking pour Shopify est un outil fantastique doté de nombreuses fonctionnalités et avantages. Par exemple, vous pouvez facilement configurer le suivi sur votre site Web en ajoutant un script Google Tag Manager et en configurant votre domaine personnalisé et votre Custom Loader. De plus, vous pouvez envoyer des données utilisateur à la couche de données et configurer des webhooks.

Toutes ces fonctionnalités contribuent à rendre les données d’analyse plus précises en prolongeant la durée de vie des cookies et en rendant le suivi du navigateur résistant aux technologies de prévention du suivi. Ces outils sont essentiels pour une transmission fiable des données via le point de terminaison du serveur vers les plateformes de publicité et de marketing.

Si vous recherchez une solution rapide et simple pour configurer le balisage côté serveur Shopify, Stape est la solution qu’il vous faut. Profitez dès aujourd’hui de cette excellente solution et bénéficiez d’informations de suivi plus précises avec l’application Stape Conversion Tracking pour Shopify. Testez-la dès maintenant. Nous savons que vous ne serez pas déçu !