Utiliser JavaScript sur vos pages Web

La communication entre Site et le site Web du client se fait par le biais d'une bibliothèque JavaScript personnalisée. Le script doit être chargé sur chaque page du site Web du client devant être suivie ou ciblée par Site.

Cette rubrique contient des informations sur les éléments suivants :
Script d'intégration standard
Confirmation du chargement du script
Suivi
Ciblage
Désactivation du suivi

Script d'intégration standard

Le script standard doit être inclus dans toutes les pages web pour lesquelles vous souhaitez activer le suivi et le ciblage. Vous pouvez le récupérer dans 'Configuration, Paramètres de l'univers,Général'. Cliquez sur 'Afficher le script d'intégration'.

Copier

Exemple :

var wa = document.createElement("script"),
    wa_s = document.getElementsByTagName("script")[0];
wa.src = "//PATH PROVIDED/xxxxxx.js";
wa.type = "text/javascript";
wa_s.parentNode.insertBefore(wa, wa_s);
wa.bt_queue = [];
wa.afterInit = function() {
    wa.bt_queue.push(JSON_OBJECT());
};

Remarque technique:
Les premières lignes de ce script (lignes 1 à 6) incluent le script initial de Site dans le code source du site Web. Ce script charge automatiquement un deuxième script de Site après le chargement du premier. Dès que les deux scripts sont chargés, une fonction de rappel est déclenchée, qui peut être utilisée pour exécuter des appels de Site spécifiques sur la page Web actuelle (lignes 7-9). Le plus souvent, le client effectue son premier appel de suivi pour consigner chaque visite des pages de Site (wa.bt_queue.push).

Remarque technique:
Le chemin utilisé dans ce script pointe vers un Réseau de distribution de contenu dans lequel chaque univers dispose de son propre dossier et de son propre fichier. Ce fichier est généré automatiquement et comprend également des informations sur les emplacements définis pour l'univers. Il est différent pour chaque installation.

Ce script doit être chargé sur chaque page du site Web du client. Pour cela, vous devez l'inclure dans la source html de chaque page, ou bien le charger de manière asynchrone via JavaScript (par exemple avec Google Tag Manager).

Remarque: Vous avez la possibilité de définir un objectif d'offre (conversion) au sein de votre offre afin de savoir si le visiteur l'a ou non acceptée. Pour le savoir, vous pouvez notamment utiliser une 'balise de page CRM (Journey)'. Dans ce cas, le script de suivi doit se trouver sur la page Journey. Voir également 'Offres,Pourquoi ? Définissez vos objectifs'.

 

Confirmation du chargement du script

Si le script de Site est correctement chargé sur le site Web du client, 2 fichiers JavaScript externes se chargent également. Pour vérifier, accédez à l'onglet Réseau de la console de débogage du navigateur. Le nom exact de ces fichiers diffère pour chaque univers de Site, mais ils sont toujours chargés à partir du domaine « targetemsecure.blob.core.windows.net » :

Si un appel de suivi a été inclus dans la fonction afterInit du script de base, un premier appel de suivi vers Site doit également s'afficher dans l'onglet Réseau du navigateur. Selon l'emplacement du client, cet appel de suivi est chargé soit à partir du domaine « siteeuwest.slgnt.eu » (pour les clients en Europe) soit à partir du domaine « siteus.slgnt.eu » (pour les clients aux États-Unis) :

Si l'implémentation de Site est correcte, le client devrait également voir les visiteurs enregistrés dans la vue en temps réel de Site.

 

Suivi

Pour renvoyer les données de suivi vers Site, vous devez pousser un objet JSON dans la file d'attente de l'objet JavaScript array wa.bt queue.

Copier 
wa.bt_queue.push(JSON_OBJECT)

Remarque: Même si vous ne renvoyez pas de données, le push doit se trouver dans le script de suivi. Dans le cas contraire, aucune information ne sera envoyée vers Site, pas même les données de suivi par défaut pour les vues, les durées, les balises Site par défaut, etc.

Vous trouverez ci-dessous un exemple de transfert de 2 valeurs de balise ('CATEGORY' et 'Q_PURCHASES'), d'un identifiant personnalisé et de différents paramètres.

Copier

Exemple:

wa.bt_queue.push({
    "tagValues": [{
            "tag": "CATEGORY",
            "value": "Phones"
        },
        {
            "tag": "Q_PURCHASES",
            "value": 1
        }
    ],
    "customIdentifier": "12345",
    "async": false,
    "isEvent": false,
    "isTargeting": true
});
  • Pour renvoyer les valeurs des balises : Une table JSON de balises avec leurs valeurs correspondantes. Ce sont les balises qui sont effectivement mesurées.
    "tagValues":[{"tag":"CATEGORY","value":"Phones"},{"tag":"Q_PURCHASES","value":1}]

Utilisez le nom public de la balise

  • customIdentifier:ex. identifiant client, après connexion sur le site web. "customIdentifier": "12345". Définit un éventuel identifiant personnalisé permettant de définir le visiteur de manière unique. En général, il s'agit d'une valeur permettant de reconnaître les visiteurs entre différentes sessions (par exemple l'identifiant de connexion ou le GUID). Il est très important que la valeur fournie ici soit valide et unique pour chaque visiteur. Si aucun customIdentifier n'est connu au moment de l'appel, cette propriété ne doit pas être incluse dans l'appel de suivi.

  • async: vrai ou faux. Indique si l'appel de suivi doit être effectué de manière asynchrone. Habituellement défini sur faux. Pour les appels Ajax par exemple, peut être défini sur vrai. "async": false

  • isEvent: vrai ou faux. Indique si l'appel de suivi est une visite de page (faux) ou un événement (vrai, par exemple, un clic sur un bouton). "isEvent": false

  • isTargeting: vrai ou faux. Définit si l'appel de suivi est utilisé ou non pour le ciblage. Si tel est le cas, l'appel ne sera exécuté que lorsque le DOM est prêt. L'appel vérifie que les emplacements détectés sont correctement remplis avec du contenu d'offre/action. Lorsque vous utilisez des offres, définissez ce paramètre sur vrai. "isTargeting": true

  • isConsentless : vrai ou faux. Si le visiteur du site Web n'a pas donné son consentement pour être suivi et pour stocker des cookies, définissez ce paramètre sur true. "isConsentless": true

Remarque importante:
Site vous permet uniquement d’ajouter du contenu sur le site web, il ne permet pas d’en retirer. Ainsi, si la propriété « isTargeting » est définie sur vraie et qu’un profil se trouve actuellement dans l’audience visée par l’affichage d’un contenu spécifique sur le site web, ce contenu s’affichera. Si, à un moment donné, le profil ne se trouve plus dans cette audience, le contenu restera cependant affiché sur le site web.

Exemple : Il existe une offre qui vise à l’affichage d’un contenu spécifique dès lors que le profil a au moins un article dans son panier. Lorsqu’un profil ajoute un article dans son panier et que la propriété « isTargeting » est définie sur vraie, l’offre est évaluée et le contenu s’affiche. Cependant, si le profil retire l’article de son panier et que la propriété isTargeting est définie sur vraie, l’offre est réévaluée, mais le contenu ne sera PAS supprimé, même si le profil ne se trouve plus dans l’audience.

Copier

Exemple d'appel JavaScript permettant de définir des valeurs de balises contenant un 'score' :

wa.bt_queue.push({
    "tagValues": [{
            "tag": "VEHICLES",
            "value": "ford_focus"
        },
        {
            "tag": "VEHICLES",
            "value": "bmw_x5",
            "score:7"
        }
    ]
});

//Le score fournit le « poids » d'une certaine valeur de balise. S'il n'est pas indiqué, la valeur de score par défaut est 1.

Remarque: Vous trouverez de plus amples informations sur les appels de suivi d'API JavaScript de Site dans le document technique correspondant.

 

Ciblage

L'explication suivante n'est requise que lorsque vous souhaitez personnaliser votre site web (hormis l'affichage des offres), mais toujours en vous basant sur les données de suivi Site. Avec les offres, il y a peu de raisons d'ajouter un JavaScript personnalisé pour modifier les éléments de la page sur la base des données Site. Les offres vous permettent en effet déjà de le faire de manière approfondie. Mais cela pourrait s'avérer utile, par exemple, si vous travaillez avec une agence de bannering tierce, qui utilise un JavaScript spécifique pour afficher certaines superpositions.

L'explication suivante n'est requise que lorsque vous souhaitez personnaliser votre site web (hormis l'affichage des offres), mais toujours en vous basant sur les données de suivi Site. Avec les offres, il y a peu de raisons d'ajouter un JavaScript personnalisé pour modifier les éléments de la page sur la base des données Site. Les offres vous permettent en effet déjà de le faire de manière approfondie. Mais cela pourrait s'avérer utile, par exemple, si vous travaillez avec une agence de bannering tierce, qui utilise un JavaScript spécifique pour afficher certaines superpositions.

Vous pouvez utiliser une fonction de rappel JavaScript personnalisée, exécutée après l'envoi des données de suivi vers Site et après la mise à jour des profils.

Dans l'appel de suivi JavaScript, indiquez les balises de suivi et les champs (nombre de clics, durée moy. de la visite, est identifié...) qui doivent être renvoyés, afin que vous puissiez les utiliser dans votre fonction de rappel. Il peut s'agir de champs de profil, balises ou champs CRM. Les seules valeurs renvoyées vers l'API front-end sont celles définies dans les paramètres de l'univers.  Voir 'Paramètres de l'univers,Champs disponibles dans l'API' pour obtenir un code d'exemple. Excepté pour les données des offres. Les données des offres sont toujours renvoyées :

  • Nom : le nom public de l'offre
  • isInOffer: indique si le visiteur se trouve ou non dans l'offre (booléen)
  • Date : la date à laquelle le visiteur est entré en premier dans l'offre (si isInOffer=true). Ou la date à laquelle le visiteur a quitté l'offre (si isInOffer=false).

L'exemple ci-dessus est étendu avec le nom d'une fonction de rappel (bt_trackingFinishedCallback), ainsi qu'une requête pour les données de profil, crm et valeurs de balise :

Copier 
wa.bt_queue.push({
    "tagValues":[
       {"tag":"CATEGORY",
        "value":"Phones"
       },        
       {"tag":"Q_PURCHASES","value":1}
    ],
    "customIdentifier":"12345",
    "async":false,
    "isEvent":false,
    "isTargeting":true,
    "finishedCallback":"bt_trackingFinishedCallback",
    "exposedFields":[ 
      {"field":"CustomIdentified"},
      {"field":"CustomId"},
      {"field":"FirstHitDateTime"},
      {"field":"AvgVisitDuration"},
      {"field":"HitsVisit"},
      {"field":"BOUGHTITEMS",
       "type":"Count",
       "parameter":""
      },
      {"field":"CATEGORY",
       "type":"Last",
       "parameter":"SUBCATEGORY"
      },
      {"field":"NEWSLETTER_OPTIN"}
    ]
});
  • FinishedCallback : la fonction de rappel à exécuter.
    "finishedCallback": "bt_trackingFinishedCallback"
  • exposedfields: requête des données de profil,  requête des valeurs de balise,  requête des données Campaign

Remarque: Pour obtenir l'explication de toutes les valeurs de l'API, voir Paramètres de l'univers,Champs disponibles dans l'API.

La fonction de rappel peut à présent utiliser les données demandées. Un objet JSON pré-analysé comprenant les données demandées est renvoyé à la fonction de rappel. Il n'est donc plus nécessaire d'analyser une chaîne JSON dans la fonction de rappel.

Copier 
bt_trackingFinishedCallback = function(data) {
    var trackingData = data;
    var html = '';
    for (var i = 0; i < trackingData.profileFields.length; i++) {
        if (trackingData.profileFields[i].name == 'CustomIdentified') {
            html += '<li>CustomIdentified: ' + trackingData.profileFields[i].value + '</li>';
        }
    }
    for (i = 0 ; i < trackingData.offers.length; i++) {
        if (trackingData.offers[i].date != "1970-01-01T00:00:00.000Z") {
            html += '<li'+(trackingData.offers[i].inOffer === true ?'':'style="text-decoration:line-through"') +
                '>' + trackingData.offers[i].name + ' [>' + trackingData.offers[i].date + ']</li>';
        }
    }
    // ...
};
 
  • La variable 'trackingData' est définie sur l'objet JSON analysé renvoyé. vartrackingData = data;
  • L'objet est vérifié pour les données de l'offre avec les boucles 'for' et le résultat est ajouté à la variable 'html' avec les balises de liste html
  • //… La variable html va être générée quelque part sous forme de liste à puces

Vous pouvez enregistrer les données de profil renvoyées avec BT.SAVEProfileInfo() dans un stockage local ou dans un cookie 'sbt_pi'. Cela peut se révéler très pratique lorsque vous souhaitez utiliser les données de profil immédiatement, dès que le visiteur visite le site web et que les données n'ont pas encore été demandées dans le push du script de suivi. Les données enregistrées peuvent être récupérées avec la fonction JavaScript API décrite dans le manuel API Site. Par exemple, pour vérifier si le visiteur est 'identifié client', nous pourrions également utiliser la méthodeBT.isCustomIdentified()plutôt que de vérifier l'objet JSON pour CustomIdentfied avec une boucle 'for'.

N'oubliez cependant pas que les données renvoyées, qu'elles le soient à partir d'un stockage local ou d'un cookie, ne sont peut-être pas toujours les données les plus récentes, jusqu'à ce qu'elles soient à nouveau enregistrées avec BT.SaveProfileInfo(). Utilisez BT.GetProfileInfo() pour récupérer un objet avec les données de profil et BT.ClearProfileInfo() pour effacer les données de profil enregistrées.

Copier
bt_trackingFinishedCallback = function(data) {
    var trackingData = data;
    var html = '';
    html += '<li>CustomIdentified: ' + BT.isCustomIdentified() + '</li>';
    for (var i = 0 ; i < trackingData.offers.length ; i++) {
        if (trackingData.offers[i].date != "1970-01-01T00:00:00.000Z") {
            html+='<li'+(trackingData.offers[i].inOffer===true ?'':'style="text-decoration:line-through"')+
            '>'+trackingData.offers[i].name+' ['+trackingData.offers[i].date+']</li>';
        }
    }
    // ...
};

Remarque: L'objet 'BT' est défini dans le script d'intégration standard :
wa.src  = "//PATH PROVIDED/xxxxxxx.js"

 

Désactivation du suivi

Vous avez la possibilité d'ajouter un hyperlien afin que le visiteur puisse désactiver le suivi Site ('Nous effectuons le suivi de votre visite sur notre site afin d'améliorer votre expérience. Si vous ne souhaitez pas être suivi, cliquez ici pour désactiver le suivi').

Ajoutez l'hyperlien suivant :<ahref="javascript:BT.optout()">cliquez ici pour désactiver le suivi</a>

Assurez-vous que le script de suivi est bien chargé. Un cookie désactivant le recueil des données Site est alors défini.