Aller au contenu principal

Intégration de Google Tag Manager pour le commerce électronique

Cette page explique comment implémenter le SDK Rokt pour le commerce électronique en utilisant Google Tag Manager afin de fournir des expériences client plus pertinentes lors du paiement. Le SDK vous permet de déclencher et de suivre ces expériences (comme afficher des offres sur les pages de confirmation) en se déclenchant sur les pages configurées et en transmettant les données utilisateur et de transaction à Rokt pour la personnalisation et la mesure.

Vous apprendrez à :

  • Créer des variables GTM qui lisent les valeurs de la couche de données de votre site
  • Créer des balises GTM pour initialiser le SDK Rokt, identifier les utilisateurs et rendre les emplacements Rokt

Avant de commencer​

Assurez-vous d'avoir :

  • Accès au bon conteneur Google Tag Manager pour votre site
  • Une couche de données déjà implémentée sur votre site (généralement réalisée par vos développeurs)
  • Votre clé API Rokt (fournie par votre gestionnaire de compte Rokt)

Comprendre la couche de données​

Vos développeurs doivent implémenter la couche de données sur votre site.

Une couche de données est un objet qui contient toutes les informations que vous souhaitez partager avec Google Tag Manager (GTM). Des informations telles que des événements ou des variables peuvent être partagées avec Google Tag Manager via la couche de données, et des déclencheurs peuvent être configurés dans Google Tag Manager en fonction des valeurs des variables (par exemple, déclencher une balise de remarketing lorsque purchase_total > 100 $) ou en fonction des événements spécifiques. Les valeurs des variables peuvent également être partagées avec d'autres balises (par exemple, ajouter purchase_total dans le champ de valeur d'une balise).

Consultez le guide du développeur GTM de Google pour des détails complets sur le fonctionnement de la couche de données.

Exemple d'une couche de données :

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

window.dataLayer.push({
  email: "jenny.smith@rokt.com",
  user: {
    firstname: "Jenny",
    lastname: "Smith",
  },
  ecommerce: {
    transaction: {
      amount: "12.36",
    },
  },
  event: "gtm.transactionComplete",
});

Identifier vos noms de variables​

Les variables sont configurées dans votre compte GTM et sont associées à la couche de données. Consultez le guide du développeur GTM pour plus de détails sur les variables.

La structure de votre couche de données sur votre page affecte le nom de la variable de la couche de données dans votre GTM.

Exemple de script de couche de données 1 :

window.dataLayer.push({
  email: "jenny.smith@rokt.com",
});

Nom de la variable de la couche de données : email

Exemple de script de couche de données 2 :

window.dataLayer.push({
  user: {
    firstname: "Jenny",
  },
});

Nom de la variable de la couche de données : user.firstname

Exemple de script de couche de données 3 :

window.dataLayer.push({
  ecommerce: {
    transaction: {
      amount: "12.36",
    },
  },
});

Nom de la variable de la couche de données : ecommerce.transaction.amount

Créez vos variables dans Google Tag Manager​

  1. Connectez-vous à votre conteneur Google Tag Manager.
  2. Cliquez sur Variables.
  3. Sous Variables définies par l'utilisateur, cliquez sur Nouveau.
  4. Entrez un nom pour votre variable.
  5. Cliquez sur Choisir un type de variable pour commencer la configuration...
  6. Sous Variables de page, sélectionnez Variable de couche de données.
  7. Entrez le Nom de la variable de couche de données. Consultez les exemples ci-dessus pour identifier le nom de la variable en fonction de la structure de votre couche de données.
  8. Cliquez sur Enregistrer.

Rokt recommande de créer des variables pour les attributs que vous prévoyez d'envoyer à Rokt, tels que :

  • email
  • firstname
  • lastname
  • mobile
  • age
  • gender
  • billingaddress1
  • billingaddress2
  • confirmationref
  • billingzipcode
  • amount
  • paymenttype
  • ccbin
  • country
  • language
  • currency

Configurez l'initialisation et le tag de vues de page​

Le tag mParticle by Rokt - Initialisation et Vue de Page peut :

  • Initialiser le SDK Rokt
  • Enregistrer les vues de page

Utilisez ces étapes pour créer le tag d'initialisation et de vues de page :

  1. Cliquez sur Tags dans la navigation de gauche de votre conteneur et cliquez sur Nouveau. Google Tag Manager
  2. Sélectionnez Configuration du tag.
  3. Sélectionnez Découvrez plus de types de tags dans la Galerie de Modèles Communautaires. Google Tag Manager
  4. Recherchez Rokt et sélectionnez mParticle by Rokt - Initialisation et Vue de Page. Google Tag Manager
  5. Entrez un nom descriptif pour votre tag (par exemple, [Rokt] Initialiser et Enregistrer les Vues de Page).
  6. Entrez les paramètres de configuration :
    • Clé API : Entrez votre clé API Rokt (fournie par votre gestionnaire de compte Rokt).
    • Mode Développement : Si vous testez votre intégration, cochez la case Mode Développement. Si vous êtes prêt à utiliser votre tag en production, décochez cette case.
    • Enregistrer les Vues de Page : L'enregistrement des vues de page consigne un événement de vue de page (avec des attributs tels que screen_name, url, et page de référence) dès que chaque page se charge.
      • Les attributs de votre événement de vue de page correspondront aux attributs de votre site (par exemple, si vous êtes sur l'écran "paiement", votre screen_name sera payment).
      • Vous devriez enregistrer les vues de page dès que chaque page dans le parcours de transaction de l'utilisateur est chargée.
    • Niveau de Journalisation : Dans le menu déroulant, sélectionnez votre niveau de journalisation préféré (Verbose, Avertissement, Aucun).
    • Interdire les Cookies Fonctionnels : Les cookies fonctionnels sont utilisés pour améliorer la convivialité et les performances d'un site ou d'une application. Pour plus de détails, consultez les préférences de cookies.
    • Interdire les Cookies de Ciblage : Les cookies de ciblage sont utilisés pour activer la publicité, le reciblage et la personnalisation marketing. Pour plus de détails, consultez les préférences de cookies.
    • Utiliser le Stockage de Cookies : Le stockage de cookies pour une intégration SDK est utilisé pour conserver les valeurs clés (telles que les identifiants ou l'état de consentement) afin que le SDK puisse maintenir la continuité entre les pages et les sessions.

Google Tag Manager

  1. Configurez le déclencheur pour ce tag GTM. Les étapes suivantes varient selon que votre site est une application multipage (MPA) ou une application à page unique (SPA) :
  • Configuration du déclencheur pour les applications multipage
    1. Sélectionnez Toutes les Pages dans la liste.
  • Configuration du déclencheur pour les applications à page unique
    1. Sélectionnez Toutes les Pages et Changement d'Historique dans la liste.
remarque

Le tag d'initialisation et de vue de page doit être chargé sur toutes les pages. La configuration exacte du déclencheur peut varier en fonction de votre implémentation. Si vous avez des questions sur la stratégie d'implémentation, contactez votre gestionnaire de compte Rokt.

  1. Entrez un nom descriptif pour votre déclencheur, comme Toutes les Pages ou Changement d'Historique.
  2. Ajoutez des exceptions si nécessaire.
  3. Cliquez sur Enregistrer.
remarque

Dans le cadre de l'exécution du tag d'initialisation et de vue de page, un événement personnalisé roktInitComplete sera poussé dans la couche de données lorsque l'initialisation sera terminée. Il est fortement recommandé d'utiliser un déclencheur Événement Personnalisé GTM avec le nom d'événement roktInitComplete pour les tags mParticle by Rokt - Events suivants.

Configurer la balise d'événements​

La balise mParticle par Rokt - Événements peut :

  • Identifier les utilisateurs
  • Rendre les emplacements Rokt
  • Envoyer des attributs d'utilisateur et d'événement à Rokt

Bien que vous puissiez activer plusieurs actions dans une seule balise d'événements, certaines implémentations nécessitent une balise GTM par action (par exemple, une balise pour l'identité et une balise pour la sélection des emplacements). Si vous avez des questions sur la stratégie d'implémentation, contactez votre responsable de compte Rokt.

attention

Assurez-vous que la balise d'initialisation et de journalisation de la vue de page s'exécute avant toute balise d'événements. Utilisez l'événement de couche de données roktInitComplete dans vos déclencheurs pour que les balises d'événements ne se déclenchent qu'après l'initialisation.

Suivez ces étapes chaque fois que vous créez une nouvelle balise d'événements (par exemple, une pour l'identité et une pour la sélection des emplacements) :

  1. Cliquez sur Balises dans la navigation de gauche de votre conteneur et cliquez sur Nouveau. Google Tag Manager
  2. Sélectionnez Configuration de la balise.
  3. Sélectionnez Découvrir plus de types de balises dans la galerie de modèles communautaires. Google Tag Manager
  4. Recherchez Rokt et sélectionnez mParticle par Rokt - Événements. Google Tag Manager
  5. Entrez un nom descriptif pour votre balise (par exemple, [Rokt] Identifier l'utilisateur, [Rokt] Sélectionner les emplacements).
remarque

Vous pouvez activer une ou plusieurs actions dans une seule balise d'événements (Identité, Sélection des emplacements, et/ou Journal d'événements). Configurez d'abord toutes les actions souhaitées pour cette instance de balise, puis cliquez sur Enregistrer lorsque vous avez terminé.

Si vous avez besoin que la balise se déclenche plusieurs fois (par exemple, une fois pour identifier un utilisateur et plus tard pour rendre un emplacement), créez plusieurs balises GTM en utilisant le même modèle d'événements.

Identifier l'utilisateur​

Rokt recommande d'identifier l'utilisateur actuel (par exemple, par email) pour que les offres soient plus pertinentes. Configurez cette balise pour se déclencher dès que l'email de l'utilisateur est disponible dans votre couche de données.

  1. Dans la balise mParticle par Rokt - Événements, accédez à la section Identité et sélectionnez Activer l'identité.
  2. Sous le menu déroulant Méthode IDSync, sélectionnez Identifier.
  3. Sous Type d'identité, cliquez sur Ajouter une ligne et sélectionnez le type d'identité souhaité :
    • Si vous envoyez une adresse email brute, sélectionnez Email dans le menu déroulant Clé et entrez votre variable GTM pour l'email brut. Google Tag Manager
    • Si vous envoyez une valeur d'email hachée, sélectionnez Autre dans le menu déroulant Clé et entrez votre variable GTM pour l'email haché. Google Tag Manager
  4. (Optionnel) Sélectionnez Hacher l'email brut ? si vous souhaitez que la balise hache la valeur de l'email brut avant qu'elle ne soit envoyée à Rokt. Google Tag Manager
  5. Configurez le Déclenchement pour que la balise se déclenche uniquement après l'initialisation et uniquement lorsque la valeur de l'email est disponible.
    • Exemple (l'email est déjà présent lors du chargement de la page de paiement) :
      1. Dans Déclenchement, cliquez sur + pour créer un nouveau déclencheur.
      2. Sous Configuration du déclencheur, sélectionnez Événement personnalisé.
      3. Définissez Nom de l'événement sur roktInitComplete.
      4. Configurez le déclencheur pour se déclencher sur Certains événements personnalisés.
      5. Ajoutez des conditions qui correspondent à votre implémentation, par exemple :
        • URL de la page contient checkout
        • {{User Email}} correspond à RegEx .+@.+\..+
      6. Cliquez sur Enregistrer pour enregistrer le déclencheur.

Google Tag Manager 6. Lorsque vous avez terminé d'ajouter des actions à cette balise d'événements, cliquez sur Enregistrer.

Insérer un Placement​

La principale valeur du SDK Rokt est débloquée grâce à la méthode selectPlacements, qui sert un placement hyper-pertinent pour vos clients en fonction des attributs que vous fournissez. Configurez cette balise pour qu'elle se déclenche sur la page où vous souhaitez que les offres apparaissent (par exemple, une page de confirmation d'achat ou une page de "remerciement").

  1. Dans la balise mParticle by Rokt - Events, accédez à la section Select Placements et sélectionnez Enable Select Placements.
  2. Sous Configuration, configurez les options dont vous avez besoin :
    • Activez Sandbox lors du test de l'intégration. Désactivez-le lorsque vous êtes prêt à passer en production.
    • (Optionnel) Définissez un Identifiant de Page si vous devez identifier de manière unique une page (utile pour les flux de paiement en plusieurs étapes qui réutilisent la même URL). Si vous décidez d'intégrer un Identifiant de Page, veuillez en informer votre gestionnaire de compte Rokt. Exemples :
      • stg.rokt.conf - Une page de confirmation dans un environnement de staging (test)
      • prod.rokt.conf - Une page de confirmation dans un environnement de production
      • stg.rokt.payments - Une page de paiements dans un environnement de staging (test)
      • prod.rokt.payments - Une page de paiements dans un environnement de production
    • (Optionnel) La balise Events vous permet également de vous abonner à des événements de placement, afin que vous puissiez recevoir des notifications pour des événements, tels que lorsqu'un placement est interactif ou lorsqu'un client interagit avec une offre. Pour vous abonner :
      1. Créez une nouvelle variable GTM pour chaque événement Rokt que vous souhaitez suivre.
      2. Mappez cette variable GTM à l'événement Rokt correspondant.
      3. Lorsque l'événement Rokt est déclenché, un nouvel événement de couche de données est poussé avec le nom de votre variable GTM mappée.
      4. Pour des exemples de différents types d'événements, consultez le suivi basé sur les événements. Google Tag Manager
  3. Configurez le déclencheur pour cette balise GTM. Les étapes suivantes varient selon que votre site est une application multipage (MPA) ou une application à page unique (SPA) :
  • Configuration du déclencheur pour les applications multipages
    1. Sélectionnez Événement Personnalisé dans la liste.
    2. Entrez roktInitComplete comme nom de l'événement.
    3. Changez les règles de déclenchement du déclencheur à Certains Événements Personnalisés.
    4. Entrez le(s) paramètre(s) d'URL qui identifient chaque page unique où la balise doit se déclencher. Par exemple, si votre page de confirmation est example.com/cart/payment/confirmation, le paramètre d'identification peut être n'importe lequel de cart, payment, ou confirmation.

Google Tag Manager

  • Configuration du déclencheur pour les applications à page unique
    1. Sélectionnez Changement d'Historique dans la liste.
    2. Changez les règles de déclenchement du déclencheur à Certains Changements d'Historique.
    3. Entrez le paramètre d'URL qui identifie la page où la balise doit se déclencher. Par exemple, si votre page de confirmation est example.com/cart/payment/confirmation, le paramètre d'identification peut être n'importe lequel de cart, payment, ou confirmation.
  1. Cliquez sur Enregistrer pour enregistrer le déclencheur.
  2. Lorsque vous avez terminé d'ajouter des actions à cette balise Events, cliquez sur Enregistrer.

Ajout d'attributs​

En plus d'identifier un utilisateur et de rendre les placements, Rokt recommande d'envoyer des attributs supplémentaires pour améliorer la pertinence des offres pour l'utilisateur.

  1. Dans la balise mParticle par Rokt - Événements, accédez à la section Attributs.
  2. Entrez autant d'attributs que vous avez disponibles qui sont liés à l'utilisateur ou à l'événement. Pour les attributs prédéfinis, Rokt les catégorisera automatiquement comme un attribut utilisateur ou un attribut événement, comme indiqué ci-dessous.

Google Tag Manager

Attributs prédéfinis​

Clé d'attributValeur d'exempleAttribut utilisateurRemarques
PrénomJohn✓Le prénom du client.
Nom de familleDoe✓Le nom de famille du client.
Mobile3125551515✓Les numéros de téléphone peuvent être formatés soit comme 1112345678 ou +1 (222) 345-6789.
Âge33✓L'âge du client.
Date de naissance19900717✓Date de naissance. Formatée comme yyyymmdd.
SexeM✓Le sexe du client. Par exemple, M, Masculin, F, ou Féminin.
Type de paiementCarte de créditMéthode de paiement utilisée pour la transaction. Par exemple, Carte de crédit, PayPal, Apple Pay.
Référence de confirmation/ID de transactionORD-123456ID unique de transaction ou de référence de confirmation pour l'achat.
Montant52.25Le montant total de la transaction.
Type de conversionAchatType d'événement de conversion. Par exemple, Achat, Inscription, Prospect.
ID de suivi de conversion de retourTRACK-789ID de clic Rokt.
Adresse Ligne 1123 Main Street✓La ligne d'adresse principale du client.
Adresse Ligne 2Apt 4B✓La ligne d'adresse secondaire du client (appartement, suite, etc.).
VilleBrooklyn✓La ville du client.
ÉtatNY✓L'état ou la province du client.
Code postal11201✓Le code postal ou postal du client.
PaysUS✓Le pays du client.
TitreM.✓Le titre du client. Par exemple, M., Mme, Mlle, Dr.
Langueen✓Langue associée au client ou à l'achat.
remarque

Veuillez confirmer les attributs avec votre gestionnaire de compte Rokt avant de finaliser l'intégration.

  1. Si vous souhaitez envoyer des attributs supplémentaires qui ne sont pas déjà définis, cliquez sur Ajouter une ligne sous Attributs personnalisés.
  2. Entrez le nom et la valeur de l'attribut sous Nom de l'attribut et Valeur de l'attribut.
  3. Si l'attribut est lié à l'utilisateur (et non à l'événement Show Placement), sélectionnez Attribut utilisateur. Google Tag Manager
  4. Lorsque vous avez terminé d'ajouter des actions à cette balise d'événements, cliquez sur Enregistrer.
Cet article vous a-t-il été utile ?
Last updated Feb 4, 2026