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 pour offrir des expériences client 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 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, 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 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 votre structure de 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
• Enregistrement des vues de page
• Insertion d'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.

attention

Pour les balises d'identification, de vue de page et d'insertion d'emplacement, utilisez des déclencheurs distincts qui se produisent après l'initialisation. Évitez d'assigner exactement le même déclencheur à plusieurs balises Rokt pour empêcher leur exécution simultanée. Le script d'initialisation pousse un événement personnalisé roktInitComplete dans la couche de données lorsque l'initialisation est terminée. Utilisez cet événement dans les déclencheurs pour les balises Rokt suivantes.

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.
3. Sélectionnez Configuration de la balise et sous Personnalisé, sélectionnez Balise HTML personnalisée.
4. Entrez un nom descriptif pour votre balise, comme "Initialiser Rokt".
5. Dans le champ d'entrée HTML, collez le snippet suivant :

<script type="text/javascript">

// Entrez votre clé API Rokt
var API_KEY = "YOUR_API_KEY";

// Si vous avez configuré un domaine de première partie, définissez-le comme la valeur de DOMAIN au lieu du domaine par défaut apps.rokt-api
var ROKT_DOMAIN = "https://apps.rokt-api.com";


// Spécifiez l'environnement de données avec isDevelopmentMode :
// Définissez isDevelopmentMode sur true si vous testez encore votre intégration.
// Définissez isDevelopmentMode sur false si votre intégration est prête pour les données de production.
var isDevelopmentMode = true;

// Définissez vos paramètres de configuration SDK
window.mParticle = {
    config: {
    	isDevelopmentMode: isDevelopmentMode,
    	logLevel: isDevelopmentMode ? 'verbose' : 'warning',
        // Définissez useCookieStorage sur true si votre site utilise plusieurs sous-domaines (c'est-à-dire mysite.com & checkout.mysite.com). La valeur par défaut est 'false'.
        useCookieStorage: 'false',
        // Identifiez l'utilisateur actuel :
        // Si vous avez l'adresse e-mail de l'utilisateur au moment de l'initialisation, incluez-la dans un objet appelé `userIdentities` dans `identifyRequest` comme indiqué ci-dessous. Sinon, vous pouvez supprimer l'objet identityRequest.
        identifyRequest: {
            userIdentities: {
                // Assurez-vous de remplacer la variable d'exemple {email} par la variable que vous créez pour stocker l'email de votre utilisateur
                email: {{email}},
                // Les adresses e-mail hachées doivent être passées dans le champ `other`
                other: {{hashed-email}}
            },
        }
    },
};

// Chargez le SDK
(function(e) { window.mParticle = window.mParticle || {}; window.mParticle.EventType = { Unknown: 0, Navigation: 1, Location: 2, Search: 3, Transaction: 4, UserContent: 5, UserPreference: 6, Social: 7, Other: 8, Media: 9 }; window.mParticle.eCommerce = { Cart: {} }; window.mParticle.Identity = {}; window.mParticle.Rokt = {}; window.mParticle.config = window.mParticle.config || {}; window.mParticle.config.rq = []; window.mParticle.config.snippetVersion = 2.6; window.mParticle.ready = function(e) { window.mParticle.config.rq.push(e); }; ["endSession", "logError", "logBaseEvent", "logEvent", "logForm", "logLink", "logPageView", "setSessionAttribute", "setAppName", "setAppVersion", "setOptOut", "setPosition", "startNewSession", "startTrackingLocation", "stopTrackingLocation"].forEach(function(e) { window.mParticle[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift(e); window.mParticle.config.rq.push(t); }; }); ["setCurrencyCode", "logCheckout"].forEach(function(e) { window.mParticle.eCommerce[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("eCommerce." + e); window.mParticle.config.rq.push(t); }; }); ["identify", "login", "logout", "modify"].forEach(function(e) { window.mParticle.Identity[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Identity." + e); window.mParticle.config.rq.push(t); }; }); ["selectPlacements","hashAttributes","setExtensionData"].forEach(function(e) { window.mParticle.Rokt[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Rokt." + e); window.mParticle.config.rq.push(t); }; }); var t = window.mParticle.config.isDevelopmentMode ? 1 : 0, n = "?env=" + t, a = window.mParticle.config.dataPlan; if (a) { var o = a.planId, r = a.planVersion; o && (r && (r < 1 || r > 1e3) && (r = null), n += "&plan_id=" + o + (r ? "&plan_version=" + r : "")); } var i = window.mParticle.config.versions, s = []; i && Object.keys(i).forEach(function(e) { s.push(e + "=" + i[e]); }); var c = document.createElement("script"); c.type = "text/javascript"; c.async = !0; window.ROKT_DOMAIN = ROKT_DOMAIN || 'https://apps.rokt-api.com'; mParticle.config.domain = ROKT_DOMAIN.split('//')[1]; c.src = ROKT_DOMAIN + "/js/v2/" + e + "/app.js" + n + "&" + s.join("&"); var l = document.getElementsByTagName("script")[0]; l.parentNode.insertBefore(c, l); })(API_KEY);

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ event: 'roktInitComplete' });
</script>

remarque

Le script d'initialisation pousse un événement personnalisé roktInitComplete dans la couche de données lorsque l'initialisation est terminée. Utilisez cet événement dans les déclencheurs pour les balises personnalisées Rokt suivantes.

6. Entrez vos paramètres de configuration :
   • Remplacez YOUR_API_KEY par la clé API fournie par votre gestionnaire de compte Rokt.
   • Si vous êtes prêt à utiliser votre balise pour les données de production, définissez isDevelopmentMode sur false. Laissez-le défini sur true si vous testez encore votre balise.
   • Assurez-vous que email est défini sur la variable que vous avez créée pour stocker l'adresse e-mail non hachée de votre utilisateur. Dans l'exemple de code ci-dessus, le nom de la variable est {email}.
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 à 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 Balises dans la navigation de gauche de votre conteneur Google Tag Manager.
2. Cliquez sur Nouveau et sélectionnez Configuration de la balise. Sous Personnalisé, sélectionnez Balise HTML personnalisée.
3. Entrez un nom descriptif pour votre balise, comme "Identifier l'utilisateur".
4. Dans le champ d'entrée HTML, collez le code suivant :

<script type="text/javascript">

window.mParticle.ready(
    function() {
        var identifyRequest = {
            userIdentities: {
            // Si vous utilisez un e-mail brut, non haché, passez-le dans le champ `email`
            email: {{email}},

            // Si vous intégrez un e-mail haché, passez-le dans le champ `other` à la place
            other: {{hashed-email}}
            }
        };
        mParticle.Identity.identify(identifyRequest);
    }
);

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ event: 'roktIdSyncComplete' });

</script>

5. Si vous envoyez l'adresse e-mail brute, non hachée de l'utilisateur à Rokt, définissez la clé comme email. Si vous envoyez l'adresse e-mail hachée, définissez la clé comme other. Assurez-vous de remplacer les noms de variables d'exemple ({{user.email}} et {{user.hashed-email}}) par les variables de couche de données que vous avez créées pour stocker l'adresse e-mail de votre utilisateur.

6. Configurez un déclencheur pour déclencher 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 déclenche la balise lorsqu'un utilisateur fournit une adresse e-mail via une soumission de formulaire :

   • Depuis Configuration du déclencheur, sélectionnez Soumission de formulaire e-mail.
   • Cliquez sur le déclencheur pour accéder à la page de configuration du déclencheur, puis cliquez sur l'icône d'édition.
   • Sous Ce déclencheur se déclenche sur, sélectionnez Certains formulaires.
   • 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 correspond à RegEx et entrez l'expression régulière .+@.+\..+.

   

attention

La configuration exacte du déclencheur que vous utilisez pour la balise d'identification de l'utilisateur dépendra de votre intégration. De plus, assurez-vous que la balise d'initialisation se déclenche avant la balise d'identification. 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 d'enregistrer des événements, parlez à votre gestionnaire de compte Rokt.

remarque

Le script d'identification pousse un événement personnalisé appelé roktIdSyncComplete dans la couche de données après un appel d'identification réussi. Vous pouvez utiliser cet événement pour déclencher des balises suivantes.

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

1. Cliquez sur Balises dans la navigation de gauche de votre conteneur Google Tag Manager.
2. Cliquez sur Nouveau et sélectionnez Configuration de la balise. Sous Personnalisé, sélectionnez Balise HTML personnalisée.
3. Entrez un nom descriptif pour votre balise, comme "Enregistrer Vue de Page".
4. Dans le champ d'entrée HTML, collez le fragment de code suivant :

<script type="text/javascript">

// Attendez que le SDK soit entièrement chargé avant d'enregistrer l'événement
window.mParticle.ready(function() {
   mParticle.logPageView(
           // Nom de l'événement : "vue de page" identifie le type d'événement enregistré
           "vue de page",
           {
              // Capturez le dernier segment du chemin URL comme nom d'écran,
              // par exemple, "/produits/chaussures" → "chaussures". Défaut à "accueil" si le chemin est vide.
              "screen_name": location.pathname.split("/").filter(Boolean).pop() || "accueil",

              // Enregistrez l'URL complète de la page actuelle (y compris protocole, chemin, requête et hachage)
              "url": window.location.toString(),

              // Capturez l'URL de la page qui a référé l'utilisateur à celle-ci,
              // si disponible. Cela aide à suivre la navigation de l'utilisateur entre les pages ou sites.
              "referring-page": document.referrer
           }
   );
});

</script>

La méthode logPageView prend deux arguments :

Nom de la Page : une chaîne pour le nom de la page chargée

Attributs Personnalisés : un objet de paires clé/valeur contenant des informations sur la page

Le champ du nom de la page doit être défini sur un nom de page générique. Par exemple, un site de commerce électronique pourrait avoir des centaines de pages de détails de produit. Pour les enregistrer correctement, vous devez utiliser un nom générique (par exemple "Page de Détail Produit") puis enregistrer l'url et d'autres attributs de la page en tant qu'attributs.

5. Configurez un déclencheur pour que cette balise soit activée sur chaque page de l'entonnoir de conversion (après la balise d'initialisation).

remarque

Il est recommandé de combiner l'initialisation et l'enregistrement de la vue de page en une seule balise qui se déclenche sur toutes les pages ou d'utiliser le déclencheur d'événement personnalisé roktInitComplete sur toutes les pages.

attention

La configuration exacte du déclencheur que vous utilisez pour la balise d'enregistrement des vues de page dépendra de votre intégration. De plus, assurez-vous que la balise d'initialisation se déclenche avant la balise d'enregistrement des vues de page. Si vous avez des questions sur la meilleure façon de mettre en œuvre cette balise pour que vos pages soient enregistrées correctement, parlez à 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 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 New et sélectionnez Tag Configuration. Sous Custom, sélectionnez Custom HTML Tag.
3. Entrez un nom descriptif pour votre balise, comme "Insert Placement".
4. Dans le champ d'entrée HTML, collez le snippet suivant :

<script type="text/javascript">

window.mParticle.ready(
    function() {
        var selection = window.mParticle.Rokt.selectPlacements({
            identifier: "yourPageIdentifier",
            attributes: {
                "email": {email},
                "firstname": {user.firstname},
                "lastname": {user.lastname},
                "mobile": {user.mobile},
                "age": {user.age},
                "gender": {user.gender},
                "billingaddress1": {user.billingaddress1},
                "billingaddress2": {user.billingaddress2},
                "confirmationref": {ecommerce.transaction.confirmationref},
                "billingzipcode": {ecommerce.transaction.billingzipcode},
                "amount": {ecommerce.transaction.amount}, // Montant de la transaction en décimal, par ex. 300.5
                "paymenttype": {ecommerce.transaction.paymenttype}, // Par ex. Carte cadeau | Chase, Visa
                "ccbin": {ecommerce.transaction.ccbin}, // Bin de carte de crédit, par ex. 372888
                "country": {ecommerce.transaction.country}, // Code pays ISO Alpha-2
                "language": {ecommerce.transaction.language}, // Code langue ISO 639-1 à 2 lettres
                "currency": {ecommerce.transaction.currency}, // Devise de la transaction, par ex. USD
                // Vous pouvez également passer des attributs supplémentaires pertinents pour la transaction ici
                // Pour une liste complète des attributs, voir https://docs.rokt.com/developers/integration-guides/rokt-ads/web-sdk/attributes#core-attributes
                shippingtype: {ecommerce.transaction.shippingtype}
            }
        });
    }
);

</script>

5. Définissez chaque attribut que vous souhaitez transmettre à Rokt dans votre appel selectPlacements avec la variable que vous avez créée en fonction de la couche de données de votre site.

6. Pour configurer quand la balise est déclenchée, sélectionnez Triggering.

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

8. Cliquez sur Trigger Configuration. Les étapes suivantes varient selon que votre site est une application multipage (MPA) ou une application à page unique (SPA) :

   • Configuration de déclencheur pour les applications multipages

     1. Sélectionnez Custom Event dans la liste.
     2. Entrez roktInitComplete comme nom de l'événement. Si l'utilisateur n'est pas connu jusqu'à l'événement d'insertion de placement, utilisez roktIdSyncComplete comme nom de l'événement à la place de roktInitComplete.
     3. Changez les règles de déclenchement à Some Custom Events.
     4. Entrez le(s) paramètre(s) d'URL qui identifient chaque page unique où la balise doit être déclenchée. 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.

     

     remarque

     Si l'utilisateur n'est pas connu jusqu'à l'événement de conversion, utilisez l'événement Custom Event roktIdSyncComplete comme déclencheur d'événement.

   • Configuration de déclencheur pour les applications à page unique

     1. Sélectionnez History Change dans la liste.
     2. Changez les règles de déclenchement à Some History Changes.
     3. Entrez le paramètre d'URL qui identifie la page où la balise doit être déclenchée. 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.

9. Cliquez sur Save.