Suivre les iframes avec Adobe Analytics : le guide complet

Le défi du suivi des iframes

Intégrer une iframe dans un site est pratique, mais cela pose un problème majeur de tracking. Par défaut, votre tag d’analytics (Google Analytics, Adobe Analytics, etc.) ne « voit » pas ce qui se passe à l’intérieur de l’iframe.

La cause principale est une mesure de sécurité essentielle, la Same-Origin Policy. Elle empêche un script d’une page d’accéder aux données d’une autre page si elles ne partagent pas la même origine (même protocole, même domaine, même port).

Pour contourner cette limite, il faut établir un canal de communication explicite entre la page parente et l’iframe. La solution la plus robuste et la plus sûre est l’API postMessage.

Étape 1 : le code de la page parente (le conteneur)

La page parente écoute les messages envoyés par l’iframe. C’est elle qui reçoit les données puis les envoie à Adobe Analytics. Dans votre JavaScript, ajoutez un écouteur d’événement sur l’objet window :

window.addEventListener('message', (event) => {
  // Required for security: ignore messages from any other origin
  // Always verify the message's origin!
  if (event.origin !== "https://your-iframe-domain.com") {
    return;
  }

  // If the message is valid, process the data
  const iframeData = event.data;

  // Check that the data contains the expected event
  if (iframeData.event === 'iframe_interaction') {
    // Push data to the Data Layer
    digitalData.events.push({
      eventInfo: {
        eventName: 'iframe_interaction',
        iframeAction: iframeData.action,
        iframeValue: iframeData.value
      }
    });

    // Set the s.* variables explicitly (or fire a Tags rule that maps the data layer),
    // then send a link call. Pushing to digitalData alone does not populate Adobe Analytics variables.
    s.linkTrackVars = 'eVar10,events';
    s.linkTrackEvents = 'event10';
    s.eVar10 = iframeData.action + ':' + iframeData.value;
    s.events = 'event10';
    s.tl(true, 'o', 'iframe_interaction');
  }
}, false);

Ce que fait ce code :

• window.addEventListener('message', ...) : la page parente se met à l’écoute de tout message entrant.
• if (event.origin !== ...) : point crucial. On vérifie que le message vient d’une source de confiance, pour éviter l’injection de code malveillant.
• digitalData.events.push(...) : on enrichit la data layer (ici digitalData, la convention W3C CEDDL ; avec l’Adobe Client Data Layer, on pousserait dans adobeDataLayer) avec les informations reçues de l’iframe.
• s.tl() : on envoie un appel de suivi de lien (custom link). Contrairement à s.t(), s.tl() ne compte pas de page vue, ce qui convient aux clics et aux envois de formulaire dans l’iframe. Seules les variables listées dans linkTrackVars et linkTrackEvents sont envoyées.

Vous utilisez le Web SDK plutôt qu’AppMeasurement ? Le Web SDK utilise sendEvent pour les pages vues comme pour les appels de lien : remplacez s.tl() par alloy('sendEvent', { xdm: { web: { webInteraction: { name: 'iframe_interaction', type: 'other' } } } }).

Étape 2 : le code de l’iframe (le contenu)

L’iframe doit envoyer un message à la page parente à chaque événement à suivre (clic sur un bouton, envoi de formulaire, etc.). Dans le JavaScript de la page intégrée dans l’iframe :

const sendDataToParent = (action, value) => {
  const data = {
    event: 'iframe_interaction',
    action: action,
    value: value
  };

  // Send the message to the parent page
  window.parent.postMessage(data, "https://your-parent-domain.com");
};

// Example: Send a message when a button is clicked
document.getElementById('button-in-iframe').addEventListener('click', () => {
  sendDataToParent('click', 'button_name');
});

// Example: Send a message when a form is submitted
document.getElementById('form-in-iframe').addEventListener('submit', () => {
  sendDataToParent('submit', 'contact_form');
});

Ce que fait ce code :

• window.parent.postMessage(...) : la fonction qui envoie le message. window.parent désigne la fenêtre de la page parente.
• data : l’objet envoyé, avec les informations utiles au tracking.
• "https://your-parent-domain.com" : très important. C’est le domaine de la page parente. L’iframe n’envoie le message qu’à cette adresse, ce qui garantit la sécurité.

Conclusion

Suivre une iframe n’est pas impossible, cela demande simplement une autre approche. Avec l’API postMessage, vous établissez un canal sûr à sens unique entre le contenu intégré et la page parente (il peut devenir bidirectionnel si le parent envoie aussi des messages à l’iframe). Vous récupérez ainsi l’information utile et l’intégrez à votre plan de taggage Adobe Analytics, pour une analyse complète et fiable.

Sources

• Méthode s.tl(), Adobe Experience League
• Commande sendEvent du Web SDK
• Window.postMessage, MDN

Pour aller plus loin, lisez la version complète de l’article (en anglais) : How to Track Iframes Using Adobe Analytics: A Complete Guide.

Besoin d’aide sur ce sujet ? Consultant Adobe Analytics.