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.
Les avantages de l’utilisation du balisage côté serveur pour Shopify
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.
Comment configurer le balisage côté serveur pour votre boutique Shopify
Étape 1. Configurez le conteneur serveur Google Tag Manager sur Stape
Développez l'élément ci-dessous pour accéder au guide détaillé.
Comment configurer le conteneur sGTM
Étape 1. Créez un conteneur serveur dans Google Tag Manager
➡️ Remarque
Avant de configurer votre conteneur Google Tag Manager côté serveur, il est important de configurer d'abord votre conteneur GTM Web, car :
- Le conteneur Web collecte les événements, les paramètres et les interactions des utilisateurs sur votre site web.
- Il transmet ces données à votre conteneur côté serveur.
Veuillez suivre la documentation officielle de Google.
1. Sélectionnez votre compte GTM → Cliquez sur Admin → Cliquez sur + à côté du nom du conteneur.
2. Ajoutez un nom de conteneur → Sous la plateforme cible, choisissez Serveur. Cliquez sur Créer.
3. Choisissez Manuellement provisionner le serveur de balisage. Copiez la configuration de votre conteneur. Nous en aurons besoin dans les étapes suivantes.
Étape 2. Créez un compte Stape pour héberger votre conteneur sGTM
1. Rendez-vous sur stape.io et créez un compte ou connectez-vous.
2. Cliquez sur Créer un conteneur sGTM sur la page d'accueil.
3. Saisissez les informations relatives à votre conteneur.
- Nom du conteneur : donnez un nom à votre conteneur (pour plus de commodité, nous vous recommandons d’utiliser le même nom que celui que vous avez attribué au conteneur de serveur dans GTM).
- Configuration du conteneur : collez les données de Configuration du conteneur que vous avez copiées depuis la fenêtre contextuelle Installer Google Tag Manager. Si vous les avez perdues, rendez-vous sur Google Tag Manager → cliquez sur Admin → cliquez sur Paramètres du conteneur → copiez la chaîne de caractères située sous Configuration du conteneur.
- Emplacement du serveur : pour des performances optimales, choisissez l’emplacement de serveur le plus proche de la région où se trouvent la plupart de vos clients. Consultez la liste des emplacements de serveurs disponibles ici. Vous pouvez également opter pour l’option d’emplacement de serveur multizone mondial si votre trafic provient de différentes régions. Les requêtes entrantes seront alors automatiquement acheminées vers la zone disponible la plus proche en fonction de l’adresse IP de l’utilisateur.
Cliquez ensuite sur Créer un conteneur.
4. Choisissez une formule pour votre conteneur. Vous pouvez commencer par une formule Gratuite. Cliquez sur Continuer avec une formule gratuite.
5. Vous verrez l’état de votre conteneur, sa configuration et le nom de la formule. Le déploiement d’un conteneur serveur prend environ 5 minutes.
Veuillez actualiser la page pour mettre à jour le statut. Si la configuration côté serveur de Google Tag Manager a été effectuée correctement, vous devriez voir le statut En cours d'exécution.
Étape 2. Ajoutez et configurez l'application Stape Conversion Tracking pour Shopify
2.1 Installez l'application Stape Conversion Tracking dans votre boutique
L'application Stape's Conversion Tracking pour Shopify peut être installée gratuitement depuis la boutique Shopify.
2.2 Configurez l'onglet General
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 :
Comment configurer Cookie Keeper
1. Connectez-vous à votre compte Stape et sélectionnez votre conteneur sGTM depuis le tableau de bord.
2. Accédez à Power-ups et cliquez sur Use en regard du panneau Cookie Keeper.
3. Activez le bouton Cookie Keeper pour l'activer.
4. Dans Standard cookies, sélectionnez les cookies à prolonger.
- Cookies personnalisés
Si les cookies dont vous avez besoin ne figurent pas dans la liste standard, vous pouvez configurer des cookies personnalisés. Saisissez le nom du cookie et, si besoin, définissez une expiration en jours (laissez le champ vide pour une durée illimitée).
5. Cliquez sur Save changes.
Tester la configuration
Les étapes ci-dessous utilisent le cookie _ga de Google Analytics à titre d'exemple, mais vous pouvez appliquer la même procédure à n'importe quelle plateforme. Avant de commencer, assurez-vous d'avoir configuré au moins un tag GA4.
- Ouvrez le navigateur Safari (version 16.4 minimum). Pour vérifier la version, cliquez sur Safari dans la barre de menus et sélectionnez About Safari.
- Accédez à l'URL de votre site en ajoutant le paramètre
?galid=test123pour définir le cookie_ga. Par exemple :votresite.com/?galid=test123. - Faites un clic droit sur la page → Inspect Element → onglet Storage → Cookies.
- Repérez
_ga, copiez et notez sa valeur, puis supprimez le cookie (clic droit sur le cookie → Delete). - Rechargez la page deux fois.
- Vérifiez que le cookie
_gaest réapparu avec la même valeur. Si c'est le cas, Cookie Keeper fonctionne correctement.
- 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).
2.3 Configurez l'onglet Data Layer
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.
2.4 Configurez l'onglet Webhooks
Les événements webhook sont configurés dans l'onglet Webhook.
Remarque : les webhooks Shopify ne contiennent aucune donnée de cookies, pourtant indispensables au tracking sur toute plateforme. Il est donc recommandé de n'y recourir qu'en dernier ressort, si vous ne pouvez pas effectuer le suivi en ligne pour une raison quelconque.
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 :
2.5 L'onglet Customer Match
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.
Étape 3. Envoyez des données au conteneur serveur Google Tag Manager
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.
Comment envoyer des données depuis un site web vers un conteneur de serveur via Data Tag
Étape 1. Installez le modèle Data Tag :
- Cliquez sur le menu Tags.
- Cliquez sur Nouveau.
- Ouvrez la section Modèles de votre conteneur Google Tag Manager web → ajoutez Data Tag depuis la galerie de modèles.
- Cliquez sur l’onglet Configuration de la balise.
- 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 » :
- 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}}.
- 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.)
- Cochez la manière dont vous souhaitez que les données soient envoyées :
- 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.
- 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.
- 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.
- 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.
- 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.
- Sous Données utilisateur, vous pouvez envoyer des paramètres utilisateur et appliquer des transformations ou stocker des données.
- 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.
- 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 :
- Suivez ce lien.
- Cliquez sur Code → Télécharger le fichier ZIP.
Étape 5. Maintenant, importez Data Client :
- Ouvrez votre conteneur Google Tag Manager serveur.
- Cliquez sur Modèles.
- Sous Clients, cliquez sur Nouveau.
- Cliquez sur les trois points dans le coin supérieur droit.
- 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).
- 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.
Comment envoyer des données du conteneur Web vers le conteneur serveur via Google Analytics 4
Étape 1. Créez une variable de configuration pour l’URL du conteneur serveur. Pour ce faire :
- Cliquez sur le menu Variables.
- Cliquez sur Nouveau sous la barre Variable définie par l’utilisateur.
- Cliquez sur la barre Configuration des variables.
- Sélectionnez le type Balise Google : Paramètres de configuration.
- Cliquez sur Ajouter un paramètre.
- Saisissez les paramètres suivants :
- Paramètre de configuration : server_container_url.
- Valeur : l’URL de votre conteneur serveur Tag Manager.
- Donnez un nom descriptif à votre variable et cliquez sur Enregistrer.
Étape 2. Créez une balise Google Analytics 4 :
- Cliquez sur le menu Balises.
- Cliquez sur Nouveau.
- Cliquez sur l’onglet Configuration de la balise.
- Sélectionnez Google Analytics → Balise Google.
- 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).
- Sous Paramètres de configuration, sélectionnez la variable du conteneur serveur que vous avez créée précédemment.
- Sous Déclenchement, assurez-vous que l’option Initialisation - Déclencheur toutes les pages est sélectionnée.
- Donnez un nom descriptif à votre balise et cliquez sur Enregistrer.
- 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 :
- Cliquez sur le menu Balises.
- Cliquez sur Nouveau.
- Cliquez sur l’onglet Configuration de la balise.
- Sélectionnez Google Analytics → Google Analytics : Événement GA4.
- Saisissez votre ID de mesure (issu du menu Flux de données de GA4).
- Donnez un nom descriptif à votre événement.
- Cliquez sur Déclenchement → Tous les clics.
- Donnez un nom descriptif à la balise.
- Cliquez sur Enregistrer.
Configuration du suivi des conversions avec différentes plateformes
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 :
Étape 4. Configurez le tracking dans le conteneur serveur Google Tag Manager
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.
Étape 5. Testez la configuration de l'application
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 :
- Après avoir lancé le Mode Preview dans GTM, activez le bouton Shopify Sandbox dataLayer dans l'onglet Settings de l'extension.
- 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.
Conclusion
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 !
Nous pouvons vous aider avec l'installation!
Nous vous couvrons! Cliquez sur Obtenir de l'aide, remplissez le formulaire et nous vous enverrons un devis.
Commentaires