Créer un pixel personnalisé Google Tag Manager

Vous pouvez utiliser Google Tag Manager (GTM) comme pixel personnalisé pour gérer vos pixels tiers.

Lorsque vous êtes prêt(e) à tester votre pixel personnalisé GTM, utilisez l’outil Shopify Pixel Helper pour vous assurer que tous les événements que vous souhaitez suivre sont bien ajoutés au bac à sable, sans erreur.

Vous pouvez également utiliser l’extension de page Google Tag Assistant pour tester quelles balises Google sont chargées sur la page. Cependant, la fonctionnalité Résoudre les problèmes de balise de Google Tag Assistant n’est pas compatible avec les pixels personnalisés et ne détecte aucune balise Google dans un pixel personnalisé, ni les autres pixels chargés par GTM.

Sur cette page

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

Avant de créer un pixel personnalisé à l’aide de Google Tag Manager, examinez les informations suivantes pour vous assurer que vous comprenez comment configurer votre pixel :

Créez ou ouvrez un compte Google Tag Manager et récupérez l’ID de conteneur GTM.
Pour des raisons de sécurité, les gestionnaires de balises chargés dans notre bac à sable ont les mêmes restrictions que les autres pixels. En savoir plus sur les limitations du bac à sable des pixels.

Créer un pixel personnalisé Google Tag Manager

Vous pouvez créer un pixel personnalisé Google Tag Manager pour gérer vos pixels tiers.

Étapes :

Ouvrez votre compte Google Tag Manager et sélectionnez celui avec lequel vous souhaitez configurer un pixel personnalisé.
Cliquez sur Administration, puis sur Installer Google Tag Manager pour ouvrir le code d’installation.
Copiez le bloc de code qui doit être placé dans la section head 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.
S’abonner aux événements clients et les transmettre à la dataLayer de GTM.
Pour vérifier l’affichage du code, consultez l’exemple de pixel personnalisé Google Tag Manager.
Configurer Google Tag Manager pour accepter les événements de votre pixel personnalisé.
Facultatif : si des appels dataLayer.push(event) existent dans votre fichier checkout.liquid, remplacez-les 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 dataLayer de GTM dans votre code de pixel personnalisé.

Par défaut, il existe un ensemble d’événements standard auxquels vous pouvez vous abonner. Cependant, si vous souhaitez suivre des événements clients qui ne font pas partie de l’offre d’événements standard, vous pouvez publier vos propres événements personnalisés à partir de fichiers de modèles Liquid.

Vous trouverez ci-dessous un exemple d’abonnement à l’événement standard « product_viewed », qui indique qu’une personne consulte un produit. Lorsque l’événement se déclenche, il transmet l’événement à la dataLayer.

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

Dans cet exemple, le titre de produit est transmis dans la charge utile de l’événement. Vous pouvez utiliser une variable Google Tag Manager pour récupérer le titre de produit à partir de la charge utile de l’événement dans la balise de votre choix.

Exemple de pixel personnalisé Google Tag Manager

L’exemple ci-dessous est une version simplifiée d’un pixel personnalisé Google Tag Manager qui montre comment envoyer des données à Google Tag Manager. Pour transmettre davantage d’événements à votre dataLayer, vous pouvez vous abonner à d’autres événements standard et personnalisés.

Remarque

Cet exemple de pixel contient également des exemples de paramètres qui reflètent le Google Consent Mode v2, un mode qui permet à un pixel de respecter les choix d’un visiteur en matière de consentement aux cookies pour le trafic incluant l’Espace économique européen (EEE). Pour en savoir plus sur le mode de consentement, consultez l’aide Google Ads.

Ces exemples de paramètres pourraient ne pas correspondre à ce qui est requis pour votre boutique, en fonction de la législation de votre région en matière de confidentialité. Si vous avez besoin d’aide pour ajouter ou personnaliser les paramètres de consentement dans votre pixel personnalisé, consultez le guide de Google intitulé Configurer le mode de consentement sur les sites web ou faites appel à un Partenaire Shopify.

// 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,
  });
});

Configurer Google Tag Manager pour accepter les événements de votre pixel personnalisé

Après avoir créé votre pixel personnalisé, vous devez configurer Google Tag Manager pour qu’il accepte les événements de votre pixel personnalisé. Pour ce faire, vous avez besoin d’une balise, d’un déclencheur et de variables dataLayer dans Google Tag Manager.

Le tableau suivant répertorie quelques exemples d’événements clients standard et leurs équivalents dans Google Tag Manager :

Liste des événements clients Shopify standard à utiliser avec les pixels, comparés à leurs événements clients équivalents dans Google Tag Manager, ainsi que le déclencheur requis pour que les événements s’activent.
É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	Commencer le paiement	begin_checkout
checkout_completed	Finaliser le paiement	purchase
product_removed_from_cart	Supprimer l’article du panier	remove_from_cart
cart_viewed	Consulter le panier	view_cart
product_viewed	Consulter la page de détails du produit	view_item
collection_viewed	Consulter une liste d’articles	view_item_list

Les paramètres d’événement de balise GTM doivent correspondre aux conventions de dénomination attendues pour que les événements dataLayer de votre pixel personnalisé soient traités.

Voici quelques exemples de propriétés d’événement dataLayer de pixel personnalisé et leurs paramètres d’événement équivalents dans Google Analytics 4 (GA4) :

Liste des événements `dataLayer` de pixel personnalisé utilisant la convention de dénomination de GA4
Événements `dataLayer` de pixel personnalisé	Paramètres d’événement GA4
`event.data?.checkout?.currencyCode`	`currency`
`event.data?.checkout?.totalPrice?.amount`	`value`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`coupon`
`event.data?.checkout?.shippingLine?.price?.amount`	`shipping`
`event.data?.checkout?.totalTax`	`tax`
`event.data?.checkout?.lineItems`	`items`

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 de Google Tag Manager est un type d’événement personnalisé portant le nom checkout_completed. Le champ Event name du déclencheur doit correspondre à la clé event de votre pixel personnalisé.

orderId et currency sont les variables que vous utilisez dans Google Tag Manager pour saisir les données de l’événement. Elles peuvent être mappées à une variable dataLayer dans Google Tag Manager. Chaque variable d’événement nécessite sa propre variable dataLayer. Réglez le déclencheur de manière à ce qu’il s’active pour 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 de l’événement, ajoutez les variables que vous souhaitez saisir. Dans l’exemple ci-dessus, orderId, currency, price, shippingLine et totalTax seraient configurés en tant que variables dataLayer. Chaque fois que la balise s’active, elle saisit ces variables dataLayer avec l’événement.

Notez qu’au moins une balise et un déclencheur doivent être configurés dans Google Tag Manager pour que le transfert de données ait lieu.

Remplacement des anciens appels dataLayer.push(event) par analytics.publish()

Si vous avez déjà configuré Google Tag Manager, vous devez remplacer vos appels dataLayer.push par des appels Shopify.analytics.publish(). Vous trouverez 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 le fichier checkout.liquid. Cependant, comme checkout.liquid n’est pas compatible avec les Shopify Extensions, vous devez utiliser une extension d’IU pour transmettre des données aux pixels de suivi web.

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

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

Voici l’équivalent pour Shopify, qui transmet les données à votre pixel personnalisé :

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

Ensuite, dans votre code de pixel personnalisé, vous ajouteriez quelque chose comme ceci :

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

Remplacer les anciens dataLayer.push(data)

Google Tag Manager dispose d’une fonctionnalité qui vous permet de transmettre un objet dataLayer avec état à chaque événement. Bien que le bac à sable de pixels de Shopify n’inclue pas de fonctionnalité équivalente, vous pouvez obtenir le même résultat en créant votre propre objet de données et en le transmettant à des événements personnalisés.

Par exemple, définissez un objet « customData » avant de publier vos événements personnalisés :

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

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

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

Conseils pour la configuration de Google Analytics 4

Tenez compte des conseils suivants pour configurer Google Analytics 4 (GA4) lorsque vous utilisez Google Tag Manager en tant que pixel personnalisé.

URL de page plus claires

Lorsque GA4 s’exécute dans un bac à sable, vous remarquerez peut-être que les URL de page incluent des informations sur le bac à sable dans lequel il s’exécute. Si vous souhaitez supprimer les informations du bac à sable de ces URL, vous pouvez désactiver le suivi automatique des pages de GA4 et mettre en œuvre votre propre suivi à la place, en utilisant l’événement standard page_viewed.

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

Après avoir publié votre propre événement dans dataLayer, vous pouvez créer une balise page_view GA4 qui se déclenche sur 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. Après avoir défini 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 sur la même que celle que vous avez transmise à votre dataLayer à partir de votre pixel personnalisé.

Mesure améliorée

Lors du chargement de GA4 dans le bac à sable de pixels de Shopify, certains événements qui sont normalement déduits automatiquement devront être configurés manuellement. Par exemple, les clics sur les liens sortants, qui font partie du paramètre de mesure améliorée de GA4, ne peuvent pas être déclenchés automatiquement pour des raisons de sécurité lors de l’utilisation de pixels personnalisés. Cependant, il est possible de mettre en œuvre vous-même les événements de mesure améliorée de GA4 en tant qu’événements personnalisés.

Le code fourni ci-dessous inclut un exemple simplifié du suivi des clics sur les liens sortants :

<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 GTM, créez une balise GA4 qui envoie le clic sur le lien à GA4, en vous assurant que le nom de l’événement est click, pour correspondre à la convention de nommage des événements améliorés de GA4.

Vous pouvez obtenir le même suivi pour n’importe lequel des indicateurs de mesure améliorée de Google.

Créer un pixel personnalisé Google Tag Manager

Sur cette page

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

Créer un pixel personnalisé Google Tag Manager

Étapes :

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

Exemple de pixel personnalisé Google Tag Manager

Configurer Google Tag Manager pour accepter les événements de votre pixel personnalisé

Remplacement des anciens appels dataLayer.push(event) par analytics.publish()

Remplacer les anciens dataLayer.push(data)

Conseils pour la configuration de Google Analytics 4

URL de page plus claires

Mesure améliorée

Test et débogage de votre pixel personnalisé