Utilisation de Livefyre avec Adobe Analytics et Dynamic Tag Manager (DTM)

Configurez Adobe Analytics et Dynamic Tag Manager (DTM) pour collecter des données pour les applications Livefyre.

Étape 1 : Configurer des Événements dans Adobe Analytics

Faites correspondre les événements Livefyre à un ou plusieurs Événements de réussite personnalisés dans Adobe Analytics Report Suite Manager.

Pour plus d’informations sur le Gestionnaire de Report Suites, voir Gestionnaire de Report Suites.

Connectez-vous à Adobe Analytics en tant qu’utilisateur administrateur.
Ouvrez Adobe Analytics Admin Report Suite Manager.
Créez une suite de rapports ou choisissez une suite existante.
Modifiez la suite de rapports en cliquant sur la suite de rapports à modifier, puis accédez à Edit Settings > Conversion > Success Events.
Faites correspondre les événements Livefyre à un ou plusieurs Événements de réussite personnalisés.

Étape 2 : Configuration des variables de conversion

Faites correspondre les variables de conversion (eVars) de Livefyre aux variables de conversion dans le Gestionnaire de Report Suites d'administration Adobe Analytics. Les variables de conversion se comportent comme une fonction de tri afin de déterminer comment vous prévoyez d’identifier les données collectées à partir des événements Livefyre.

Dans le Gestionnaire de Report Suites, cliquez sur Edit Settings > Conversion > Conversion Variables.
Sélectionnez les variables de conversion personnalisées (eVars) à utiliser et faites-les correspondre aux variables de conversion Livefyre. Pour mapper une variable de conversion Livefyre à une variable de conversion personnalisée :

Activation de la variable de conversion
Nommer la variable de conversion
Attribuer un type à la variable de conversion

Enregistrez les variables de conversion personnalisées.

Étape 3 : Utilisez la gestion dynamique des balises pour Ajouter votre suite de rapports avec des Événements Livefyre

Ajoutez Adobe Analytics à la gestion dynamique des balises pour que Analytics fonctionne. Pour ce faire, créez une nouvelle propriété et un nouvel outil, puis ajoutez la nouvelle suite de rapports avec les événements Livefyre à la propriété. Pour plus d’informations sur la gestion dynamique des balises, voir DTM.

Vous n’avez pas besoin d’effectuer cette étape si vous avez déjà configuré une propriété ou un outil pour la suite de rapports que vous avez configurée avec les événements Livefyre.

Dans la gestion dynamique des balises, créez ou modifiez une propriété existante.
Créez ou modifiez un outil Adobe Analytics existant.
Si un outil Adobe Analytics existant n'existe pas, cliquez sur le bouton Add a Tool.
Définissez les paramètres suivants pour l’outil :
- Définissez Tool Type sur Adobe Analytics.
- Activer Automatic Configuration.
- Activer Authenticate via Marketing Cloud.
Ajoutez ou confirmez le nom de la suite de rapports contenant des événements Livefyre dans le champ Report Suites.

Étape 4 : Configuration d’une règle de chargement de page pour configurer la gestion d’Analytics

Configurez une règle de chargement de page pour extraire toutes les données. La règle de chargement de page vous permet de placer du javascript personnalisé dans la règle qui enregistre le événement au chargement de la page.

REMARQUE

N’utilisez pas de règles basées sur un Événement ou de règles d’appel direct.

Dans la gestion dynamique des balises, sélectionnez l’onglet Rules.
Cliquez sur Page Load Rules.
Cliquez sur le bouton Create New Rule.
Ouvrez la section Conditions en cliquant sur le bouton Plus.
Déclenchez la règle. Sélectionnez les types de déclencheurs DOM Ready ou Onload si vous souhaitez retarder ou mettre en oeuvre la règle de manière asynchrone.
(Facultatif) Ajoutez des paramètres supplémentaires pour limiter les pages qui affichent les applications Livefyre. Pour plus d’informations sur les autres options de configuration, voir DTM.
Sous Javascript/ Third Party Tags, cliquez sur l'onglet Non-sequential, puis sur Add New Script.
Sélectionnez Sequential HTML comme type de script.

Ajoutez le script suivant dans l’éditeur de code, puis cliquez sur Save Code.

Le script suivant appelle la règle d’appel direct livefyre_analytics après le chargement du code JavaScript Livefyre. L'exemple de script suivant vérifie toutes les 400 ms si livefyre.analytics se trouve sur la page. Une fois la page chargée, livefyre.analytics envoie les informations de suivi.

/** 
* Poll for Livefyre.analytics object to exist since it gets loaded via the 
* Livefyre.js JavaScript file. Depending on the timing, this could already 
* exist or need a little time. 
*/ 
function pollForAnalytics() {  
if (Livefyre.analytics) { 
  _satellite.track('livefyre_analytics'); 
    return true; 
  } 
  setTimeout(pollForAnalytics, 400); 
} 
setTimeout(pollForAnalytics, 400);

Cliquez sur Save Code.
Cliquez sur Save Rule.

Étape 5 : Création d’une règle d’appel direct pour construire la configuration de mappage Adobe Analytics pour Livefyre

Il existe d’autres façons d’implémenter Livefyre avec la gestion dynamique des balises en utilisant des événements personnalisés, des champs d’interface utilisateur Adobe Analytics dans la gestion dynamique des balises et des éléments de données. Ce document utilise JavaScript personnalisé pour obtenir le même résultat.

Dans la gestion dynamique des balises, sélectionnez l’onglet Règles, puis cliquez sur Règles d’appel direct.
Cliquez sur le bouton Créer une règle.
Nommez la nouvelle règle Livefyre Analytics.
Développez la zone de configuration conditions.
Dans le champ String, saisissez livefyre_analytics.
Développez la section Javascript / Balise tierce et cliquez sur le bouton Ajouter un nouveau script.
Saisissez Livefyre Analytics Config dans la zone d’entrée Nom de la balise.
Sélectionnez Javascript non séquentiel.

Saisissez le code de configuration Livefyre suivant dans l’éditeur de code et cliquez sur le bouton Enregistrer le code.

var s = _satellite.getToolsByType('sc')[0].getS(); 

var evarMap = {  
  appId: 'eVar81',  
  appType: 'eVar82' 
}; 

var eventMap = { 
  FlagCancel: 'event82',  
  FlagClick: 'event82',  
  FlagDisagree: 'event82',  
  FlagOffensive: 'event82',  
  FlagOffTopic: 'event82',  
  FlagSpam: 'event82',  
  Like: 'event82', 
  Load: 'event81',  
  RequestMore: 'event82',  
  ShareButtonClick: 'event82',  
  ShareFacebook: 'event82',  
  ShareOnPostClick: 'event82',  
  ShareTwitter: 'event82',  
  ShareURL: 'event82',  
  SortStream: 'event82',  
  TwitterLikeClick: 'event82', 
  TwitterReplyClick: 'event82',  
  TwitterRetweetClick: 'event82',  
  TwitterUserFollow: 'event82' 
}; 

 function trackLivefyreEvent(data) {  
  var event = eventMap[data.type]; 
  console.log('Track:', data.type, event); 

  if (!event) { 
    console.warn(data.type, 'is not mapped   to an event in AA');  
    return; 
  } 
  var vars = ['events'];  
  switch (event) { 
    case 'event82': s.eVar83 = data.type;  
      vars.push('eVar83');  
      break; 
    default: 
  } 
    ['generator', 'evars'].forEach(function (type) {  
    var obj = data[type]; 
    for (var d in obj) { 
      if (obj.hasOwnProperty(d) && evarMap[d]) {  
        s[evarMap[d]] = obj[d];  
        vars.push(evarMap[d]); 
      } 
    } 
  }); 
  s.linkTrackVars = vars.join(',');  
  s.linkTrackEvents = event;  
  s.events = event; 

  console.log('linkTrackVars:',  s.linkTrackVars);  
  console.log('linkTrackEvents:',  s.linkTrackEvents);  
  console.log('events:', s.events); 
  s.tl(); 
  } 
  ]

  /**

Ajoute un gestionnaire d’analyses pour tous les événements d’analyses de Livefyre. Pour chaque événement, il définit les données sur un objet global, puis distribue le événement.

*/ 
function addAnalyticsHandler() {  
  Livefyre.analytics.addHandler(function (events) { 
    (events || []).forEach(function (data) {  
      console.log('Event handled:', data.type);  
      trackLivefyreEvent(data); 
    }); 
  }); 
} 
addAnalyticsHandler();

Cliquez sur Enregistrer la règle.

Étape 6 : Approuver les modifications de la règle de chargement de page

Accédez à l'onglet Approvals.
Cliquez sur Approve.
Cliquez sur Yes, approve pour confirmer votre approbation.
Atteindre Overview > Publish Queue.
Sélectionnez la règle à publier.
Cliquez sur Publish Selected.
Cliquez sur Publish pour confirmer la publication.

Script

L’exemple de code suivant mappe les eVars spécifiques aux eVars Livefyre disponibles. Le nom de la variable de conversion Livefyre ( eVar) (par exemple, appId) correspond au nom que vous avez configuré dans le Gestionnaire de Report Suites (par exemple, eVar81). Modifiez les noms eVar de ce script en variables de conversion personnalisées.

var s = _satellite.getToolsByType`('sc')[0]`.getS(); 
var evarMap = { 
  appId: 'eVar81', 
  appType: 'eVar82' 
};

L’exemple de code suivant mappe les événements spécifiques que vous avez configurés dans le Gestionnaire de Report Suites avec les événements Livefyre disponibles. Dans cet exemple, event82 est configuré comme tout événement d’interaction utilisateur sans différencier le type de événement d’interaction utilisateur (par exemple, aimer ou partager du contenu). Il s’agit d’un moyen efficace d’enregistrer toutes les informations d’interaction de l’utilisateur dans un bloc. Vous pouvez également mapper les événements de l’interface utilisateur d’Analytics de la gestion dynamique des balises avec les référencements des éléments de données.

var eventMap = { 
  FlagCancel: 'event82',  
  FlagClick: 'event82',  
  FlagDisagree: 'event82',  
  FlagOffensive: 'event82',  
  FlagOffTopic: 'event82',  
  FlagSpam: 'event82',  
  Like: 'event82', 
  Load: 'event81',  
  RequestMore: 'event82',  
  ShareButtonClick: 'event82',  
  ShareFacebook: 'event82',  
  ShareOnPostClick: 'event82',  
  ShareTwitter: 'event82',  
  ShareURL: 'event82',  
  SortStream: 'event82',  
  TwitterLikeClick: 'event82', 
  TwitterReplyClick: 'event82',  
  TwitterRetweetClick: 'event82',  
  TwitterUserFollow: 'event82' 
};

L'exemple suivant indique que s'il n'y a pas de événement dans cette liste, ne faites rien. Il n’est pas nécessaire de modifier cette section de code.

function trackLivefyreEvent(data) {  
  var event = eventMap[data.type]; 
  console.log('Track:', data.type, event); 
   
  if (!event) { 
    console.warn(data.type, 'is not mapped to an event in AA');  
    return; 
  }

Le code suivant différencie les types d'événement enregistrés par event82. La variable de conversion eVar83 enregistre le type d’interaction utilisateur et le script configure eVar83 pour séparer les données d’interaction utilisateur par type. eVar83 vous permet donc de ventiler les données enregistrées en types spécifiques d'interactions utilisateur.

  var vars = ['events'];  
  switch (event) { 
    case 'event82': s.eVar83 = data.type;  
      vars.push('eVar83');  
      break; 
    default: 
  } 
   
  ['generator', 'evars'].forEach(function (type) {  
    var obj = data[type]; 
    for (var d in obj) { 
      if (obj.hasOwnProperty(d) && evarMap[d]) {  
        s[evarMap[d]] = obj[d];  
        vars.push(evarMap[d]); 
      } 
    } 
  }); 
   
  s.linkTrackVars = vars.join(',');  
  s.linkTrackEvents = event;  
  s.events = event; 
   
  console.log('linkTrackVars:', s.linkTrackVars);  
  console.log('linkTrackEvents:', s.linkTrackEvents);  
  console.log('events:', s.events); 
   
  s.tl(); 
}

L’exemple de code suivant ajoute un gestionnaire pour écouter tous les événements qui se produisent. Il utilise la règle de chargement de page au chargement, attend l’existence de événements, puis configure un gestionnaire pour tous les événements de l’application et effectue le suivi de ces derniers. Il n’est pas nécessaire de modifier ce code.

/** 
* Adds an analytics handler for all analytics events from Livefyre. For each event, it sets the data on a global object and then dispatches the event. 
*/ 
function addAnalyticsHandler() { 
  Livefyre.analytics.addHandler(function (events) { 
    (events || []).forEach(function (data) { 
      console.log('Event handled:', data.type); 
      trackLivefyreEvent(data); 
    }); 
  }); 
}