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 passage en caisse. 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 des pages configurées et en transmettant les données utilisateur et de transaction à Rokt pour la personnalisation et la mesure.

Vous apprendrez comment créer des variables dans Google Tag Manager basées sur votre couche de données (data layer), et comment créer des balises pour initialiser le SDK 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 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 d'é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 de 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 (data layer). 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 (Data Layer Variable).
  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 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 :

  • Initialiser le SDK Rokt
  • Identifier vos utilisateurs
  • Suivre les vues de page
  • Insérer un emplacement

Vous devez également configurer des déclencheurs spécifiques qui définissent 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 pour initialiser le SDK :

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

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

  3. Sélectionnez Configuration de la balise et allez à "Découvrir plus de types de balises dans la Galerie de modèles communautaires" 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 - Modèle d'initialisation.

  6. Entrez vos paramètres de configuration :

    • Sous Clé API mParticle by Rokt, entrez la clé API fournie par votre gestionnaire de compte Rokt.
    • Si vous êtes prêt à utiliser votre balise pour les données de production, réglez Environnement sur Production sous Plus d'options d'intégration. Laissez-le réglé sur Développement si vous testez encore votre balise.
    • Si vous souhaitez autoriser/interdire les cookies, sélectionnez l'option appropriée dans le menu déroulant Plus d'intégrations.
    • Si vous souhaitez définir un calendrier de déclenchement personnalisé pour la balise, ouvrez le menu déroulant Paramètres avancés et configurez des options telles que Priorité de déclenchement, Options de déclenchement, ou Séquençage des balises.
    • Utilisez le menu déroulant Métadonnées supplémentaires de la balise 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 Déclenchement, cliquez sur le bouton + pour configurer un déclencheur ou sélectionnez-en un parmi les options disponibles.

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

  9. Cliquez sur Enregistrer.

Identifier l'utilisateur​

Vous devez également créer une balise qui identifie l'utilisateur actuel pour Rokt. Assurez-vous d'inclure cette balise sur votre site afin qu'elle soit déclenchée dès que l'utilisateur fournit son adresse e-mail.

  1. Cliquez sur Tags dans la navigation à 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 entrez la variable de données représentant le champ que vous souhaitez utiliser pour identifier vos utilisateurs.

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

  7. Configurez un déclencheur pour activer cette balise dès que l'utilisateur fournit son adresse e-mail. 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 la balise lorsqu'un utilisateur fournit une adresse e-mail via une soumission de formulaire :

    • Depuis Trigger Configuration, sélectionnez Form Submission Email.
    • Cliquez sur le déclencheur pour accéder à la page de configuration du déclencheur, puis cliquez sur l'icône d'édition.
    • 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 e-mail 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 la balise d'identification de l'utilisateur 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 utilisateurs soient correctement identifiés avant l'enregistrement des événements, parlez à votre Rokt Account Manager. De plus, assurez-vous que la balise d'initialisation est toujours déclenchée en premier avant cette balise.

Suivi des 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 pour enregistrer une vue de page :

  1. Cliquez sur Tags dans la navigation à 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 - Event - Screen View Template.
  5. Entrez un nom descriptif pour votre balise, comme "Suivi de la vue de page".
  6. Sous Screen Name, entrez "page view".
  7. Sous Page URL, entrez la variable de données pour l'URL de la page actuelle.
  8. Sous Custom Attributes, 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 pour que cette balise soit activée sur chaque page du parcours de transaction (après la balise d'initialisation).
remarque

Le champ Screen Name doit toujours être rempli avec "page view". Les champs Page URL et Custom Attributes peuvent être utilisés pour fournir des informations spécifiques pertinentes à la page exacte consultée.

attention

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

Insérer un Placement​

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

  1. Cliquez sur Tags dans la navigation à 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 un Placement".

  6. Sous Attributs de base 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 quand 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 multipage (MPA) ou une application monopage (SPA) :

    • Configuration du déclencheur pour les applications multipages​

      1. Sélectionnez Vue de page dans la liste.
      2. Changez les règles de déclenchement en Certaines vues de page.
      3. Entrez le(s) paramètre(s) 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 n'importe lequel de cart, payment ou shipping.

    • Configuration du déclencheur pour les applications monopages​

      1. Sélectionnez Changement d'historique dans la liste.
      2. Changez les règles de déclenchement en 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 n'importe lequel de cart, payment ou shipping.

  10. Cliquez sur Enregistrer.

Nom de Domaine de Première Partie​

Si vous configurez un domaine personnalisé pour une intégration de domaine de première partie, vous devez mettre à jour le modèle GTM pour faire explicitement référence à votre domaine personnalisé.

attention

Pour utiliser un domaine de première partie avec le modèle GTM, vous devez modifier le code et les autorisations du modèle. Une fois que vous modifiez un modèle communautaire, il devient un modèle personnalisé, et vous ne recevrez plus de mises à jour automatiques de la version maintenue par Rokt.

  1. Cliquez sur Templates dans la navigation de gauche de votre conteneur Google Tag Manager.
  2. Sélectionnez mParticle by Rokt - Initialization Template.
  3. Dans l'onglet Code, mettez à jour la ligne const url = "https://apps.rokt-api.com"; pour pointer vers votre domaine personnalisé. Par exemple : const url = "https://rkt.yourcompany.com";.
  4. Dans l'onglet Permissions, ajoutez votre domaine à la liste des URLs sous le menu déroulant Inject Scripts https://rkt.yourcompany.com.

Mise à Jour du Modèle

  1. Cliquez sur Save.
Cet article vous a-t-il été utile ?
Last updated Oct 29, 2025