Passer au contenu principal
Cet article decrit comment creer un pont entre Kameleoon et Google Analytics 4 (GA4) afin d’identifier les visiteurs au sein des audiences GA4 et de les cibler en consequence.

​
Prerequis

Pour que cette integration fonctionne, vous devez envoyer les informations suivantes a votre Customer Success Manager, car elles sont necessaires pour configurer le pont dans votre compte Kameleoon :
  • Les credentials d’un service account au format JSON. Veuillez utiliser un outil de compression pour securiser ce fichier avec un mot de passe, puis envoyer le paquet separement de son mot de passe.
  • Le property ID de votre projet.
  • Le sitecode de votre projet Kameleoon.

​
Etape 1 : Configurer l’authentification via un service account

Pour accorder a un compte utilisateur technique l’acces a un compte Google Analytics et les privileges pour recuperer les donnees via les APIs disponibles, les elements suivants sont requis :
  • Un compte e-mail avec acces administrateur a Google Analytics qui sera utilise pour generer un projet et un service account.
  • L’acces a toutes les audiences requises (dans GA4) pour ce compte.

​
Creer un projet dans Google Cloud Console

Vous devez creer un nouveau projet dans la console Google Cloud pour activer les APIs et creer des tokens. Accedez a cette URL. Connectez-vous a un compte e-mail administrateur et creez un nouveau projet.
Nommez le projet et choisissez votre organisation et votre emplacement.

​
Activer les APIs appropriees

Pour utiliser une API avec une adresse e-mail particuliere, elle doit etre activee dans Google Cloud Console. Cliquez d’abord sur Library.
Recherchez ces trois APIs dans la barre de recherche et activez-les :
  • Google Analytics Reporting API
  • Google Analytics Data API
  • Google Analytics API

​
Creer un service account

Pour automatiser entierement les requetes de l’API GA4 reporting, vous devez creer un service account qui contournera la necessite d’un callback d’authentification. Pour creer ce compte, cliquez sur IAM & Admin > Service accounts.
Ensuite, cliquez sur Create service account.
Ensuite, saisissez un nom pour le compte. L’e-mail de service sera genere automatiquement. Vous devriez ajouter une description, afin que l’objectif du compte soit clair. Ensuite, choisissez le role du service account. Nous recommandons de choisir viewer, car le pont de Kameleoon necessite uniquement l’utilisation des APIs Google et non des ressources du projet directement.
Une fois le compte cree, cliquez sur Keys.
Ensuite, cliquez sur Add key > Create a new key pour generer une cle telechargeable.
Choisissez le format JSON et cliquez sur Create pour generer la cle.
La cle se telecharge sur votre machine. Ensuite, envoyez ces credentials au format JSON a votre Kameleoon Customer Success Manager. Veuillez utiliser un outil de compression pour securiser ce fichier avec un mot de passe puis envoyer le mot de passe separement.

​
Accorder les autorisations de Service Account Viewer pour votre Property

Pour acceder a la page Property Access Management dans Google Analytics 4 :
  1. Connectez-vous a votre compte GA4.
  2. Selectionnez la property GA4 specifique que vous souhaitez gerer.
  3. Accedez aux parametres Admin.
  4. Recherchez l’option Property User Management ou Property Access Management.
  5. Cliquez sur + > Add user.
  1. Dans le champ Email addresses, entrez l’adresse e-mail associee au Service Account qui necessite l’acces.
  2. Dans la section Standard roles, selectionnez Viewer.
  3. Cliquez sur Add.

​
Etape 2 : Pousser les visitorcodes Kameleoon dans une dimension personnalisee GA4

Ensuite, vous devez configurer le pont pour envoyer le visitorCode Kameleoon de chaque visiteur vers GA4 via une dimension personnalisee.

​
En utilisant gtag.js

​
1. Pousser le visitorCode vers GA4

Le code suivant doit etre ajoute dans la section Kameleoon global custom script : 
      if (Kameleoon.API.CurrentVisit.pageViews === 1) {
    Kameleoon.API.Core.runWhenConditionTrue(
      function () {
        return typeof window.google_tag_data !== "undefined";
      },
      function () {
        gtag.push({ 'event': 'Kameleoon Visitor Code', 'kameleoon_visitor_code': Kameleoon.API.Visitor.code });
      },
      500
    );
  }

​
2. Creer la dimension personnalisee dans GA4

Vous devez creer une dimension personnalisee qui sera utilisee pour recevoir le visitorCode Kameleoon de chaque visiteur. Definissez le scope de la dimension sur User, nommez-la Kameleoon Visitor Code et saisissez kameleoon_visitor_code comme User property.

​
En utilisant Google Tag Manager

​
1. Pousser le visitorCode dans le dataLayer

Le code suivant doit etre ajoute dans la section Kameleoon global custom script. 
 if (Kameleoon.API.CurrentVisit.pageViews === 1) {
   Kameleoon.API.Core.runWhenConditionTrue(
     function () {
       return typeof window.google_tag_manager !== "undefined";
     },
     function () {
       dataLayer.push({ 'event': 'Kameleoon Visitor Code', 'kameleoon_visitor_code': Kameleoon.API.Visitor.code });
     },
     500
   );
 }

​
2. Ajouter la variable GTM

D’abord, vous devez creer une variable dans GTM pour le visitorCode Kameleoon. Accedez a Variables et creez une nouvelle Data Layer Variable.
  • Name : kameleoon_visitor_code
  • Variable configuration :
    • Type : Data Layer Variable
    • Data Layer Variable Name : Kameleoon Visitor Code
La variable doit etre configuree pour recuperer la valeur depuis le Data Layer.

​
3. Creer un tag dans GTM

Ensuite, vous devez creer un tag et pousser ces donnees dans GA4.
1. Creer une variable
  1. Allez sur GTM : Ouvrez Google Tag Manager et accedez a votre conteneur.
  2. Accedez aux variables : Dans le menu de gauche, cliquez sur Variables.
  3. Creer une nouvelle variable : Sous User-Defined Variables, cliquez sur New.
  4. Selectionner le type de variable : Cliquez sur Variable Configuration et choisissez Data Layer Variable.
  5. Configurer la variable :
    • Name : kameleoon_visitor_code
    • Variable type : Data Layer Variable
    • Data Layer Variable Name : Kameleoon Visitor Code
  6. Enregistrer la variable.
2. Creer un trigger
  1. Accedez aux Triggers : Dans le menu de gauche, cliquez sur Triggers.
  2. Creer un nouveau trigger : Cliquez sur New.
  3. Selectionner le type de trigger : Cliquez sur Trigger Configuration et choisissez Custom Event.
  4. Configurer le trigger :
    • Trigger name : Donnez a votre trigger un nom descriptif (par exemple, “Page Type is Product”).
    • Event name : Saisissez le nom de l’evenement sur lequel vous souhaitez baser le trigger, ou laissez-le vide si vous voulez que le trigger s’active sur n’importe quel evenement.
    • This trigger fires on : Choisissez Some Custom Events.
    • Conditions : Definissez la condition pour votre variable dataLayer.
La regex correspond a votre visitor code : /^[a-z0-9]{16}$/
  1. Enregistrer le trigger : Cliquez sur Save.
3. Attacher le trigger a un tag
  1. Accedez aux Tags : Dans le menu de gauche, cliquez sur Tags.
  2. Creer ou modifier un tag : Creez un tag ou modifiez-en un existant.
  3. Attacher le trigger :
    • Dans la configuration du tag, faites defiler jusqu’a la section Triggering.
    • Cliquez sur Triggering et selectionnez le trigger que vous avez cree.
  4. Enregistrer le tag : Cliquez sur Save.

​
Etape 3 : Creer une Custom data pour utiliser vos audiences GA4 dans Kameleoon

Pour utiliser vos audiences GA4 dans Kameleoon, vous devez configurer une custom data dans Kameleoon. Nommez votre custom data GA4 Audiences et choisissez la methode d’acquisition Custom JavaScript code. La custom data doit etre definie sur les types list of et strings, et le scope peut etre defini sur visit ou page (lorsqu’il est defini sur page, elle est reevaluee a chaque chargement de page).
Utilisez le code ci-dessous dans la methode d’acquisition de la custom data : 
 Kameleoon.API.Data.retrieveDataFromRemoteSource(Kameleoon.API.Visitor.code, function(data) {
     for (const [key, value] of Object.entries(data)) {
         Kameleoon.API.Data.setCustomData('GA4 Audiences',key)
     }
 });
 return { "value": null}
Cliquez sur Next et activez l’option Save the values for the targeting condition associated with the custom data point. Ajoutez le code JavaScript ci-dessous et remplacez [SITECODE] par le sitecode Kameleoon. Pour trouver votre sitecode, referez-vous a cet article. Assurez-vous egalement de remplacer [WEB_PROPERTY] par le bon property ID GA4. 
var xhr = new XMLHttpRequest();

xhr.open(
  "GET",
    "https://integrations.kameleoon.com/ga4-audience?sitecode=[SITECODE]&web_property=[WEB_PROPERTY]",
  false
);

var GA4Audiences = [];

xhr.onreadystatechange = function () {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    var audiences = JSON.parse(xhr.response);

    audiences.map(function (audience) {
      if (audience) {
        GA4Audiences.push({ value: audience, label: audience });
      }
    });
  }
};

xhr.send();

return GA4Audiences;
Cliquez sur Save pour creer la custom data. Vous pouvez maintenant utiliser vos audiences GA4 dans notre Segment Builder pour cibler les visiteurs dans les campagnes Kameleoon en choisissant la custom data dans notre Segment Builder et en selectionnant is among the values, ce qui affichera une liste de tous les noms d’audience de GA4.

​
Synchronisation externe des segments pour le cote serveur

Si vous souhaitez utiliser les audiences GA4 avec l’un des SDK Kameleoon, vous devez suivre les directives de la documentation de chaque SDK et utiliser la methode getRemoteData().