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

Cette page a été imprimée le Dec 03, 2023. Pour la dernière version, allez à https://help.shopify.com/fr/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial.

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.

Sur cette page

Préparer la création d’un pixel personnalisé
Créer un pixel personnalisé dans Google Tag Manager

Préparer 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 Google Tag Manager

Étapes

Ouvrez votre compte de gestionnaire de balises Google et sélectionnez le compte pour lequel vous souhaitez configurer un pixel personnalisé.
Cliquez sur Administrateur, puis sur Installer le gestionnaire de balises Google pour ouvrir le code d’installation.
Copiez le bloc de code qui appartient à la section du titre d’une page.
Supprimez les balises HTML du bloc de code. Par exemple, <script></script>.
Insérez le code restant dans un nouveau pixel personnalisé Shopify.
Abonnez-vous à des événements clients et transmettez-les à la couche de données de GTM.
Pour vérifier l’apparence du code, consultez l’exemple de pixel personnalisé de Google Tag Manager.
Configurez Google Tag Manager pour accepter les événements provenant de votre pixel personnalisé.
Facultatif : si vous avez des appels dataLayer.push(event) existants dans votre fichier checkout.liquid, vous devrez le 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 la couche de données de GTM dans votre code de pixel personnalisé.

Par défaut, vous pouvez vous abonner à un ensemble d’événements clients standard. Toutefois, si vous souhaitez suivre les événements clients qui ne font pas partie de l’offre standard, vous pouvez 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, 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.

//Initialize GTM tag
(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');

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data.checkout.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data.checkout.email,
    phone: event.data.checkout.phone,
    first_name: event.data.checkout.shippingAddress.firstName,
    last_name: event.data.checkout.shippingAddress.lastName,
    address1: event.data.checkout.shippingAddress.address1,
    address2: event.data.checkout.shippingAddress.address2,
    city: event.data.checkout.shippingAddress.city,
    country: event.data.checkout.shippingAddress.country,
    countryCode: event.data.checkout.shippingAddress.countryCode,
    province: event.data.checkout.shippingAddress.province,
    provinceCode: event.data.checkout.shippingAddress.provinceCode,
    zip: event.data.checkout.shippingAddress.zip,
    orderId: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
    subtotal: event.data.checkout.subtotalPrice.amount,
    shipping: event.data.checkout.shippingLine.price.amount,
    value: event.data.checkout.totalPrice.amount,
    tax: event.data.checkout.totalTax.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data.checkout.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data.checkout.email,
    phone: event.data.checkout.phone,
    first_name: event.data.checkout.shippingAddress.firstName,
    last_name: event.data.checkout.shippingAddress.lastName,
    address1: event.data.checkout.shippingAddress.address1,
    address2: event.data.checkout.shippingAddress.address2,
    city: event.data.checkout.shippingAddress.city,
    country: event.data.checkout.shippingAddress.country,
    countryCode: event.data.checkout.shippingAddress.countryCode,
    province: event.data.checkout.shippingAddress.province,
    provinceCode: event.data.checkout.shippingAddress.provinceCode,
    zip: event.data.checkout.shippingAddress.zip,
    orderId: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
    subtotal: event.data.checkout.subtotalPrice.amount,
    shipping: event.data.checkout.shippingLine.price.amount,
    value: event.data.checkout.totalPrice.amount,
    tax: event.data.checkout.totalTax.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: checkout_shipping_info_submitted,
    timestamp: event.timestamp,
    id: event.id,
    token: event.data.checkout.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data.checkout.email,
    phone: event.data.checkout.phone,
    first_name: event.data.checkout.shippingAddress.firstName,
    last_name: event.data.checkout.shippingAddress.lastName,
    address1: event.data.checkout.shippingAddress.address1,
    address2: event.data.checkout.shippingAddress.address2,
    city: event.data.checkout.shippingAddress.city,
    country: event.data.checkout.shippingAddress.country,
    countryCode: event.data.checkout.shippingAddress.countryCode,
    province: event.data.checkout.shippingAddress.province,
    provinceCode: event.data.checkout.shippingAddress.provinceCode,
    zip: event.data.checkout.shippingAddress.zip,
    orderId: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
    subtotal: event.data.checkout.subtotalPrice.amount,
    shipping: event.data.checkout.shippingLine.price.amount,
    value: event.data.checkout.totalPrice.amount,
    tax: event.data.checkout.totalTax.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data.checkout.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data.checkout.email,
    phone: event.data.checkout.phone,
    first_name: event.data.checkout.shippingAddress.firstName,
    last_name: event.data.checkout.shippingAddress.lastName,
    address1: event.data.checkout.shippingAddress.address1,
    address2: event.data.checkout.shippingAddress.address2,
    city: event.data.checkout.shippingAddress.city,
    country: event.data.checkout.shippingAddress.country,
    countryCode: event.data.checkout.shippingAddress.countryCode,
    province: event.data.checkout.shippingAddress.province,
    provinceCode: event.data.checkout.shippingAddress.provinceCode,
    zip: event.data.checkout.shippingAddress.zip,
    orderId: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
    subtotal: event.data.checkout.subtotalPrice.amount,
    shipping: event.data.checkout.shippingLine.price.amount,
    value: event.data.checkout.totalPrice.amount,
    tax: event.data.checkout.totalTax.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data.checkout.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data.checkout.email,
    phone: event.data.checkout.phone,
    first_name: event.data.checkout.shippingAddress.firstName,
    last_name: event.data.checkout.shippingAddress.lastName,
    address1: event.data.checkout.shippingAddress.address1,
    address2: event.data.checkout.shippingAddress.address2,
    city: event.data.checkout.shippingAddress.city,
    country: event.data.checkout.shippingAddress.country,
    countryCode: event.data.checkout.shippingAddress.countryCode,
    province: event.data.checkout.shippingAddress.province,
    provinceCode: event.data.checkout.shippingAddress.provinceCode,
    zip: event.data.checkout.shippingAddress.zip,
    orderId: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
    subtotal: event.data.checkout.subtotalPrice.amount,
    shipping: event.data.checkout.shippingLine.price.amount,
    value: event.data.checkout.totalPrice.amount,
    tax: event.data.checkout.totalTax.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data.checkout.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data.checkout.email,
    phone: event.data.checkout.phone,
    first_name: event.data.checkout.shippingAddress.firstName,
    last_name: event.data.checkout.shippingAddress.lastName,
    address1: event.data.checkout.shippingAddress.address1,
    address2: event.data.checkout.shippingAddress.address2,
    city: event.data.checkout.shippingAddress.city,
    country: event.data.checkout.shippingAddress.country,
    countryCode: event.data.checkout.shippingAddress.countryCode,
    province: event.data.checkout.shippingAddress.province,
    provinceCode: event.data.checkout.shippingAddress.provinceCode,
    zip: event.data.checkout.shippingAddress.zip,
    orderId: event.data.checkout.order.id,
    currency: event.data.checkout.currencyCode,
    subtotal: event.data.checkout.subtotalPrice.amount,
    shipping: event.data.checkout.shippingLine.price.amount,
    value: event.data.checkout.totalPrice.amount,
    tax: event.data.checkout.totalTax.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data.cartLine.merchandise.price.amount,
    currency: event.data.cartLine.merchandise.id,
    product_title: event.data.cartLine.merchandise.product.title,
    quantity: event.data.cartLine.quantity,
    total_cost: event.data.cartLine.cost.totalAmount.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data.cart.cost.totalAmount.amount,
    quantity: event.data.cart.totalQuantity,
    cart_id: event.data.cart.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data.productVariant.product.id,
    product_title: event.data.productVariant.title,
    product_sku: event.data.productVariant.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data.searchResult.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data.collection.id,
    collection_title: event.data.collection.title,
  });
});

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 couche de données dans Google Tag Manager.

Utilisez l’événement suivant checkout_completed :

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

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

order_id 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 couche de données dans Google Tag Manager. Chaque variable d’événement nécessite sa propre variable de couche de données. 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, order_id et la devise seraient définies en tant que variables de couche de données. Chaque fois que la balise lance un événement, elle saisira order_id et la devise 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.liquid n’est pas compatible avec Checkout Extensibility, 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 la couche de données dans les fichiers theme.liquid.

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

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

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.

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

<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

Ouvrez votre boutique Shopify dans un navigateur Chrome.
Ajoutez l’extension Tag Assistant Legacy de Google Chrome à votre navigateur.
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.

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

Sur cette page

Préparer la création d’un pixel personnalisé

Créer un pixel personnalisé dans Google Tag Manager

Étapes

S’abonner aux événements clients et les transmettre à la couche de données de GTM

Exemple de pixel personnalisé de Google Tag Manager

Configurez Google Tag Manager pour accepter les événements depuis votre pixel personnalisé

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

Remplacer l’ancien dataLayer.push(data)

Conseils et astuces pour la configuration de Google Analytics 4

URL de page plus propres

Mesure améliorée

Test et débogage

Prêt(e) à commencer à vendre avec Shopify ?