Créer un pixel personnalisé dans le gestionnaire de balises Google
Vous pouvez utiliser Google Tag Manager (GTM) en tant que pixel personnalisé pour gérer vos pixels tiers.
Lorsque vous êtes prêt(e) à tester votre pixel personnalisé, vous pouvez utiliser l’extension Tag Assistant Legacy de Google Chrome pour tester vos pixels personnalisés. Google Tag Assistant ne fonctionne pas avec les pixels personnalisés.
Avant de créer un pixel personnalisé à l’aide du gestionnaire de balises Google, prenez connaissance des informations suivantes pour vous assurer que vous comprenez bien comment configurer votre pixel :
Pour des raisons de sécurité, les gestionnaire de balises chargés dans notre bac à sable sont soumis aux mêmes restrictions que tous les autres pixels. En savoir plus sur les limites des pixels dans les bacs à sable.
Créer un pixel personnalisé dans Google Tag Manager
Vous pouvez créer un pixel personnalisé gestionnaire de balises Google pour gérer vos pixels tiers.
Facultatif : si vous avez des appels dataLayer.push(event) existants dans votre fichier checkout.liquid, vous devrez les remplacer par analytics.publish().
S’abonner aux événements clients et les transmettre à la couche de données de GTM
Vous pouvez vous abonner aux événements clients en utilisant dataLayer de GTM dans votre code de pixel personnalisé.
Vous trouverez ci‑dessous un exemple d’abonnement à l’événement « product_viewed » standard, qui vous indique lorsque quelqu’un affiche un produit. Lorsque l’événement se déclenche, il pousse l’événement vers dataLayer.
Dans cet exemple, le titre du produit est transmis dans les données utiles de l’événement. Vous pouvez utiliser une variable Google Tag Manager pour saisir le titre du produit à partir des données utiles de l’événement dans la balise de votre choix.
Exemple de pixel personnalisé de Google Tag Manager
L’exemple ci‑dessous est une version simplifiée d’un pixel personnalisé de Google Tag Manager, qui affiche comment envoyer des données à Google Tag Manager. Pour pousser plus d’événements vers votre dataLayer, vous pouvez vous abonner à plus d’événements standard et personnalisés.
Configurez Google Tag Manager pour accepter les événements depuis votre pixel personnalisé
Après avoir créé votre pixel personnalisé, vous devez configurer Google Tag Manager pour accepter les événements de votre pixel personnalisé. Pour ce faire, vous devez avoir une balise, un déclencheur et des variables de dataLayer dans Google Tag Manager.
Vous trouverez dans le tableau suivant quelques exemples d’événements clients standard et leurs équivalents Google Tag Manager :
Liste des événements clients standard de Shopify et leurs événements équivalents dans GTM
Les paramètres d’événements des balises GTM doivent correspondre aux conventions de dénomination attendues pour que vos événements pixel dataLayer personnalisés soient traités.
Vous trouverez ci‑dessous quelques exemples de propriétés d’événements pixel personnalisées dataLayer et de leurs paramètres d’événements équivalents dans Google Analytics 4 (GA4) :
Sélectionner la liste des événements pixel dataLayer personnalisés au moyen de la convention de dénomination GA4
Événements pixel dataLayer personnalisés
Paramètres d’événements GA4
event.data?.checkout?.currencyCode
devise
event.data?.checkout?.totalPrice?.amount
valeur
event.data?.checkout?.order?.id
ID de transaction
event.data?.checkout?.discountAllocations
coupon
event.data?.checkout?.shippingLine?.price?.amount
expédition
event.data?.checkout?.totalTax
taxe
event.data?.checkout?.lineItems
articles
Voici un exemple utilisant l’événement checkout_completed suivant :
Le déclencheur Google Tag Manager est un type d’événement personnalisé ayant checkout_completed pour nom d’événement. Le champ Nom de l’événement dans le déclencheur doit correspondre à la clé de l’événement dans votre pixel personnalisé.
orderId et la devise sont les variables que vous utilisez dans Google Tag Manager pour saisir les données de l’événement. Il est possible de les mapper sur une variable de dataLayer dans Google Tag Manager. Chaque variable d’événement nécessite sa propre variable de dataLayer. Définissez le déclencheur pour qu’il lance tous les événements personnalisés.
Créez une balise qui utilise le déclencheur que vous venez de créer. Sous les paramètres d’événement, ajoutez les variables que vous souhaitez saisir. Dans l’exemple ci‑dessus, orderId, currency, price, shippingLine et totalTax seraient définies en tant que variables de dataLayer. Chaque fois que la balise lance un événement, elle saisira ces variables dataLayer de l’événement.
Notez qu’au moins une balise et un déclencheur doivent être configurés dans Google Tag Manager pour que les données soient transférées.
Remplacement de l’ancien dataLayer.push(event) appels avec analytics.publish()
Si vous avez déjà installé Google Tag Manager, vous devez remplacer vos appels dataLayer.push par Shopify.analytics.publish(). Vous pouvez trouver vos appels dataLayer.push dans vos fichiers theme.liquid, dans la section Mise en page de votre éditeur de thème.
Vous devez également remplacer les appels dataLayer.push dans checkout.liquid. Toutefois, étant donné que checkout.liquidn’est pas compatible avec l’extensibilité du paiement, vous devez utiliser une extension d’interface utilisateur pour charger les données vers les pixels web.
Vous trouverez ci‑dessous un exemple simplifié d’un événement d’inscription par e‑mail personnalisé suivi à l’aide de dataLayer dans les fichiers theme.liquid.
L’équivalent Shopify ressemble à ceci, ce qui pousse les données dans votre pixel personnalisé.
Ensuite, dans votre code de pixel personnalisé, vous ajouteriez un item similaire.
Remplacer l’ancien dataLayer.push(data)
Le gestionnaire de balises Google dispose d’une fonctionnalité qui vous permet de pousser un objet de dataLayer dynamique sur chaque événement. Bien que le test de pixels de Shopify n’inclue pas de fonctionnalité équivalente, vous pouvez atteindre le même résultat en créant votre propre objet de données et en le passant dans des événements personnalisés.
Par exemple, définissez un objet « customData », avant que l’un de vos événements personnalisés ne soit publié.
Ensuite, chaque fois que vous souhaitez inclure vos données personnalisées, transmettez-les à votre mode de publication.
Conseils pour la configuration de Google Analytics 4
Suivez les conseils suivants pour la configuration de Google Analytics 4 (GA4) lorsque vous utilisez le gestionnaire de balises Google en tant que pixel personnalisé.
URL de page plus propres
Si GA4 est exécuté dans un environnement sandbox, il est possible que vous remarquiez que les URL des pages contiennent des informations sur l’environnement sandbox dans lequel elles fonctionnent. Si vous souhaitez supprimer les informations des environnements sandbox de ces URL, vous pouvez désactiver le suivi automatique des pages GA4 et insérer les vôtres en utilisant l’événement page_viewed standard.
Une fois que vous avez publié votre propre événement sur dataLayer, vous pouvez créer une balise page_view GA4, qui se déclenche dans l’événement page_viewed. Le plus souvent, vous pouvez utiliser le type de balise Google Analytics : événement GA4 et définir le nom de l’événement sur page_view. Une fois que vous avez configuré le type de balise et le nom de l’événement, vous devez ajouter un paramètre pour page_location et définir la valeur conformément à la valeur que vous avez transmise à votre dataLayer à partir de votre pixel personnalisé.
Mesure améliorée
Lors du chargement de GA4 dans le bac à sable du pixel de Shopify, certains événements qui sont normalement inférés automatiquement doivent être configurés manuellement. Par exemple, pour des raisons de sécurité, les clics de lien sortant, dans le cadre de la configuration de mesure améliorée de GA4, ne peuvent pas être déclenchés automatiquement lorsque vous utilisez des pixels personnalisés. Il est toutefois possible d’implémenter vous-même les événements de mesure améliorés de GA4 en tant qu’événements personnalisés.
Le code fourni ci-dessous inclut un exemple simplifié de suivi de clics de lien sortant.
Enfin, dans le GTM, créez une balise GA4 qui envoie le clic sur le lien vers le GA4, en veillant à ce que le nom de l’événement soit cliqué pour correspondre à la dénomination de l’événement amélioré du GA4.
Vous pouvez atteindre le même suivi pour tous les indicateurs de mesure améliorée de Google.
Test et débogage
Ouvrez votre boutique Shopify dans un navigateur Chrome.
Cliquez sur l’icône de l’extension, puis sur Activer.
Accédez à votre site, puis déclenchez les événements que vous souhaitez tester.
Dans l’extension, cliquez sur la balise Google Tag Manager. La section Couche de données doit afficher la charge utile de l’événement qui a été déclenché.
Toutes les autres balises chargées par Google Tag Manager sont également répertoriées dans l’extension. Vous pouvez cliquer sur ces balises pour examiner les données qui leur ont été envoyées.
Vous ne trouvez pas les réponses que vous recherchez ? Nous sommes là pour vous aider.