Créer un pixel personnalisé dans le gestionnaire de balises Google

La page Ths comprend des instructions sur l’utilisation du gestionnaire de balises Google (GTM) en tant que pixel personnalisé pour gérer vos pixels tiers.

Remarque

Nous vous recommandons de vérifier les applications disponibles avant de créer des pixels personnalisés pour améliorer la stabilité, la sécurité et les performances.Toutefois, si aucune application ne répond à vos besoins, vous pouvez décider d’utiliser le gestionnaire de balises Google en tant que pixel personnalisé.

Préparation en vue de de la création d’un pixel personnalisé

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 :

• Créez ou ouvrez un compte de gestionnaire de balises Google et obtenez l’ID de conteneur GTM.
• 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 le gestionnaire de balises Google

Remarque

Il s'agit d'un tutoriel avancé, qui n'est pas pris en charge par Shopify. Si vous avez besoin d’aide pour ajouter des pixels personnalisés à votre boutique, vous pouvez engager un Expert Shopify.

Étapes

1. Ouvrez votre compte de gestionnaire de balises Google et sélectionnez le compte pour lequel vous souhaitez configurer un pixel personnalisé.
2. Cliquez sur Administrateur, puis sur Installer le gestionnaire de balises Google pour ouvrir le code d’installation.
3. Copiez le bloc de code qui appartient à la section du titre d’une page.
4. Supprimez les balises HTML de ce bloc de code.
5. Insérez le code restant dans un nouveau pixel personnalisé Shopify.
6. Initialisez votre objet dataLayer avec window.dataLayer = window.dataLayer || [];.

Le code de votre pixel personnalisé doit ressembler à ceci, et le GTM-XXXXXXX correspondre à votre propre ID de conteneur GTM.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

S’abonner aux événements clients et aux données du GTM

Au lieu d’ajouter dataLayer.push() appels à vos fichiers de modèle liquid, vous allez faire tout votre travail GTM dataLayer dans votre code de pixel personnalisé.

Par défaut, il existe un ensemble d’événements personnalisés standard prêt à l’emploi auquel vous pouvez vous abonner, mais vous pouvez également publier vos propres événements personnalisés à partir de fichiers de modèle liquid.

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.

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

Dans cet exemple, les données sont transmises à propos du titre du produit, qui, à l’aide des variables du gestionnaire de balises Google, peuvent être transmises à d’autres balises.

Remplacement de l’ancien dataLayer.push(event) appels avec analytics.publish()

Si vous avez déjà installé le gestionnaire de balises Google, vous devez remplacer vos appels dataLayer.push par des appels Shopify.analytics.publish()

Vous trouverez ci-dessous un exemple simplifié d’un événement d’inscription par e-mail personnalisé suivi à l’aide de dataLayer.

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

L’équivalent Shopify ressemble à ceci, ce qui pousse les données dans votre pixel personnalisé.

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Ensuite, dans votre code de pixel personnalisé, vous ajouteriez un item similaire.

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Remplacer l’ancien dataLayer.push(data)

Le gestionnaire de balises Google dispose d’une fonctionnalité qui vous permet de pousser un objet de calque de données dynamique sur chaque événement. Bien que le bac à sable 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é.

<script>
  const customData = {email: customer.email}
</script>

Ensuite, chaque fois que vous souhaitez inclure vos données personnalisées, transmettez-les à votre mode de publication.

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Remarque

Pour le moment, Shopify ne prend pas en charge l’ajout de données personnalisées aux événements standard. Si vous avez besoin de cela, vous pouvez publier vos propres événements personnalisés pour remplacer des événements standard.

Exemple de pixel personnalisé du pour le moment

L’exemple ci-dessous est une version simplifiée d’un pixel personnalisé du gestionnaire de balises Google, qui affiche comment envoyer des données au GTM. Pour pousser plus d’événements vers votre dataLayer, vous pouvez vous abonner à plus d’événements standard et personnalisés.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

Conseils et astuces 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

Lorsque le GA4 est en cours d’exécution dans une boîte à sable, vous pouvez noter que les URL de la page incluent des informations sur le bac à sable dans lequel elles fonctionnent.Si vous souhaitez supprimer les informations des bacs à sable de ces URL, vous pouvez désactiver le suivi automatique des pages GA4 et mettre en œuvre les vôtres en utilisant l’événement page_viewed standard.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

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 d’événement Google Analytics : 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 calque de données à partir du pixel de votre client.

Mesure améliorée

Lors du chargement du 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 du GA4, ne peuvent pas être déclenchés automatiquement lorsque vous utilisez des pixels personnalisés.Il est toutefois possible de mettre en œuvre vous-même les événements de mesure améliorés du GA4 en tant qu’événements personnalisés.

Le code fourni ci-dessous inclut un exemple simplifié de suivi de clics de lien sortant.

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

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

Remarque

Le compagnon de balisage Google ne fonctionne pas avec les pixels personnalisés. À l’aide de l’extension du navigateur Debug de Google Analytics, le signal de débogage sera envoyé à GA4 afin que vos événements s’affichent dans l’application.

1. Ouvrez votre boutique Shopify dans un navigateur Chrome.
2. Ouvrez l’onglet de réseau sur votre navigateur et trouvez la requête appelée collect?..., qui contiendra votre ID de mesure GA4 si les données sont envoyées au réseau GA4 à partir de votre gestionnaire de balises Google.
3. Dans votre compte Google Analytics, cliquez sur Administrateur, puis sur Affichage Debug.
4. Assurez-vous que l’extension Google Debug GA est ajoutée à votre navigateur Chrome :
   • Activez GA Debug.
   • Ouvrez votre boutique Shopify dans un onglet distinct.
   • Revenez à GA4 dans l’affichage Debug et examinez les événements page_viewed.