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

Cette page a été imprimée le Apr 26, 2024. 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’affichage du code, consultez l’exemple de pixel personnalisé du gestionnaire de balises Google.
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 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é.

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.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//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');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//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 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
Événement Shopify	Déclencheur	Événement GTM
payment_info_submitted	Soumettre les informations de paiement	add_payment_info
checkout_address_info_submitted	Soumettre les informations d’expédition	add_shipping_info
product_added_to_cart	Ajouter un article au panier	add_to_cart
checkout_started	Démarrer la procédure de paiement	begin_checkout
checkout_completed	Finaliser le paiement	achat
product_removed_from_cart	Supprimer l’article du panier	remove_from_cart
cart_viewed	Afficher le panier	view_cart
product_viewed	Afficher la page des détails du produit	view_item
collection_viewed	Affichage d’une liste d’articles	view_item_list

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 :

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

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.

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

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

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