Aller au contenu principal

Intégration de Google Tag Manager pour le Ecommerce

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

Vous apprendrez à créer des variables dans Google Tag Manager basées sur votre couche de données, et comment créer des balises pour initialiser le SDK de Rokt et insérer des emplacements.

Comprendre la couche de données​

La couche de données devrait avoir été implémentée sur votre page web par vos développeurs.

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 à 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 quand purchase_total > $100) ou basés sur 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'
});

Identifiez 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 Choisissez 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 la 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 suggère de créer des variables pour les attributs suivants :

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

Créez vos balises​

Vous devrez créer des balises individuelles pour gérer chacune des fonctions principales du SDK Rokt, y compris :

  • Initialisation du SDK Rokt
  • Identification de vos utilisateurs
  • Suivi des vues de page
  • Insertion d'un emplacement

Vous devez également configurer des déclencheurs spécifiques définissant quand ces balises sont exécutées, comme décrit dans les instructions pour chaque balise ci-dessous.

Initialiser le SDK Rokt​

Pour créer une balise afin d'initialiser le SDK :

  1. Connectez-vous à votre conteneur Google Tag Manager, et cliquez sur Tags dans la navigation à gauche.

  2. Cliquez sur New et sélectionnez Tag Configuration. Google Tag Manager

  3. Sélectionnez Tag Configuration et allez à "Discover more tag types in the Community Template Gallery" Google Tag Manager

  4. Dans la barre de recherche, recherchez Rokt. Google Tag Manager

  5. Dans les résultats de recherche, sélectionnez mParticle by Rokt - Initialization Template.

  6. Saisissez vos paramètres de configuration :

    • Sous mParticle by Rokt API Key, entrez la clé API fournie par votre gestionnaire de compte Rokt.
    • Si vous avez configuré un domaine personnalisé pour une intégration de domaine de premier niveau, entrez votre nouveau nom de domaine sous First Party Domain Name.
    • Si vous êtes prêt à utiliser votre balise pour des données de production, réglez Environment sur Production sous More Integration Options. Laissez-le réglé sur Development si vous testez encore votre balise.
    • Si vous souhaitez autoriser/ne pas autoriser les cookies, sélectionnez l'option appropriée dans le menu déroulant More Integrations.
    • Si vous souhaitez définir un calendrier de déclenchement personnalisé pour la balise, ouvrez le menu déroulant Advanced Settings et configurez des options telles que Firing Priority, Firing Options, ou Tag Sequencing.
    • Utilisez le menu déroulant Additional Tag Metadata pour spécifier des variables supplémentaires à inclure dans les données d'événement lors du déclenchement d'une balise.

  7. Dans le menu Triggering, cliquez sur le bouton + pour configurer un déclencheur ou en sélectionner un parmi les options disponibles.

  8. Sélectionnez All Pages pour vous assurer que la balise d'initialisation se déclenche sur toutes les pages, et ajoutez toutes les exceptions si nécessaire.

  9. Cliquez sur Save.

Identifier l'Utilisateur​

Vous devriez également créer un tag qui identifie l'utilisateur actuel pour Rokt. Assurez-vous d'inclure ce tag dans votre site afin qu'il soit déclenché dès que l'utilisateur fournit son adresse email.

  1. Cliquez sur Tags dans la navigation de gauche de votre conteneur Google Tag Manager.

  2. Cliquez sur New et sélectionnez Tag Configuration.

  3. Dans la barre de recherche, recherchez Rokt.

  4. Dans les résultats de recherche, sélectionnez mParticle by Rokt - IDSync Template.

  5. Sélectionnez Identify dans le IDSync Event Type. Google Tag Manager

  6. Développez la section Identify Options, et saisissez la variable de données représentant le champ que vous souhaitez utiliser pour identifier vos utilisateurs.

    • Si vous souhaitez utiliser l'adresse email brute, non hachée de votre utilisateur, entrez la variable de données pour ce champ sous Email.
    • Si vous souhaitez utiliser l'adresse email hachée SHA256 de votre utilisateur, entrez la variable de données pour ce champ sous Other.

  7. Configurez un déclencheur pour activer ce tag dès que l'utilisateur fournit son adresse email. Le déclencheur que vous utilisez dépendra de votre intégration spécifique, mais (à titre d'exemple), vous pourriez créer un déclencheur qui active le tag lorsqu'un utilisateur fournit une adresse email via une soumission de formulaire :

    • Dans Trigger Configuration, sélectionnez Form Submission Email.
    • Cliquez dans le déclencheur pour atteindre la page de configuration du déclencheur, puis cliquez sur l'icône de modification.
    • Sous This trigger fires on, sélectionnez Some Forms.
    • Sélectionnez la variable de couche de données que vous avez créée pour stocker l'adresse email de votre utilisateur.
    • Pour la condition, sélectionnez matches RegEx et entrez l'expression régulière .+@.+\..+.

    Google Tag Manager

attention

La configuration exacte du déclencheur que vous utilisez pour le tag d'identification de l'utilisateur dépendra de votre intégration. Si vous avez des questions sur la meilleure façon d'implémenter ce tag afin que vos utilisateurs soient identifiés avec succès avant l'enregistrement d'événements, parlez à votre gestionnaire de compte Rokt. De plus, assurez-vous que le tag d'initialisation est toujours activé en premier avant ce tag.

Suivre les vues de page​

Vous devez enregistrer les vues de page dès que chaque page du parcours de transaction de l'utilisateur est chargée. Pour créer une balise afin d'enregistrer une vue de page :

  1. Cliquez sur Tags dans la navigation de gauche de votre conteneur Google Tag Manager.
  2. Cliquez sur Nouveau et sélectionnez Configuration de la balise.
  3. Dans la barre de recherche, recherchez Rokt.
  4. Dans les résultats de recherche, sélectionnez mParticle by Rokt - Event - Screen View Template.
  5. Entrez un nom descriptif pour votre balise, comme "Suivre la vue de page".
  6. Sous Nom de l'écran, entrez "vue de page".
  7. Sous URL de la page, entrez la variable de données pour l'URL de la page actuelle.
  8. Sous Attributs personnalisés, entrez toutes les variables de données supplémentaires sous forme de paires clé/valeur pour fournir des détails supplémentaires sur la page consultée.
  9. Configurez un déclencheur afin que cette balise soit activée sur chaque page du parcours de transaction (après la balise d'initialisation).
remarque

Le champ Nom de l'écran doit toujours être renseigné avec "vue de page". Le champ URL de la page et les attributs personnalisés peuvent être utilisés pour fournir des informations spécifiques pertinentes pour la page exacte consultée.

attention

La configuration de déclenchement exacte que vous utilisez pour la balise de suivi des vues de pages dépendra de votre intégration. Si vous avez des questions sur la meilleure façon de mettre en œuvre cette balise afin que vos pages soient suivies correctement, parlez-en à votre responsable de compte Rokt.

Insérer un Placement​

En plus de créer une balise pour initialiser le SDK ROKT, les intégrations e-commerce de Rokt nécessitent également une balise pour insérer des placements.

  1. Cliquez sur Tags dans la navigation de gauche de votre conteneur Google Tag Manager.

  2. Cliquez sur Nouveau et sélectionnez Configuration de la balise.

  3. Dans la barre de recherche, recherchez Rokt.

  4. Dans les résultats de recherche, sélectionnez "mParticle by Rokt - selectPlacement".

  5. Entrez un nom descriptif pour votre balise, comme "Insérer le Placement".

  6. Sous Attributs Principaux et Attributs Personnalisés, définissez chaque attribut que vous souhaitez transmettre à Rokt avec la variable que vous avez créée en fonction de la couche de données de votre site.

  7. Pour configurer le moment où la balise est déclenchée, sélectionnez Déclenchement.

  8. Cliquez sur le bouton + pour ajouter un nouveau déclencheur.

  9. Cliquez sur Configuration du Déclencheur. Les étapes suivantes varient selon que votre site est une application à pages multiples (MPA) ou une application à page unique (SPA) :

    • Configuration du déclencheur pour les applications à pages multiples​

      1. Sélectionnez Vue de la page dans la liste.
      2. Changez les règles de déclenchement de Certaines vues de page.
      3. Entrez le ou les paramètres 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/shipping, le paramètre d'identification peut être cart, payment, ou shipping.

    • 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 de Certains changements d'historique.
      3. Entrez le paramètre URL qui identifie la page où la balise doit se déclencher. Par exemple, si votre page de confirmation est example.com/cart/payment/shipping, le paramètre d'identification peut être cart, payment, ou shipping.

  10. Cliquez sur Enregistrer.

Cet article vous a-t-il été utile ?
Last updated Sep 24, 2025