Remarque :

Cet article a été rédigé par Alexis Cazes, ingénieur et directeur d’assistance technique chez Adobe. Le texte d’origine peut être trouvé ici.

 

Pour suivre un iframe sans référencer le code Adobe Analytics dans l’iframe, utilisez postMessage dans l’iframe et créez un écouteur d’événement sur l’événement « message » du parent.

Code parent :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>postMessage Demo: Controller</title>

    <script src="//assets.adobedtm.com/8df5a6836a129af4f87653f53431e3cb75ed1bea/satelliteLib-38fe07a258886f1204a19e0759d9807d7c395aaa-staging.js"></script>

    <link rel="stylesheet" href="style.css">
    <script>
    function listenMessage(e) {
        if(e.data == "Iframe is loaded"){
            alert(e.data);
            /*Place Adobe Analytics Code*/
        }

        if(e.data == "Iframe button clicked"){
            alert("The button was clicked with data " + e.data + " from: " + e.origin);
            /*Place Adobe Analytics Code*/
        }
    }

    if (window.addEventListener) {
        window.addEventListener("message", listenMessage, false);
    } else {
        window.attachEvent("onmessage", listenMessage);
    }
    </script>
</head>
<body>
    <h1>Controller Window</h1>
    <p>
      This window will receive the message
    </p>

    <iframe id="receiver" src="Iframe.html" width="400" height="200">
      <p>Your browser does not support iframes.</p>
    </iframe>

</body>
</html>

IFrame

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>postMessage Demo: Iframe</title>
</head>
<body>
    <h1>Iframe Window</h1>
    <p>
    </p>

    <script>
    window.top.postMessage('Iframe is loaded','http://localhost');
    </script>

    <button id="send" onClick="window.top.postMessage('Iframe button clicked','http://localhost');">Send Message</button>
</body>
</html>

Des informations supplémentaires à propos de postMessage se trouvent ici.

Remarque :

A propos de DTM : il est possible de créer une règle d’événement dans DTM en fonction de la personnalisation et rechercher le « message » d’événement. Les ingénieurs DTM confirment que cela n’est pas possible aujourd’hui. Pour faire correspondre le sélecteur d’une règle, nous utilisons document.querySelector, et document.querySelector('window') ne renvoie rien.

Résolution possible :

Une solution possible consiste à charger le code suivant via une règle de chargement de page :

  function listenMessage(e) {
        if(e.data == "Iframe is loaded"){
            /*Place Adobe Analytics Code*/
            _satellite.track("AAPageViewCall");
        }

        if(e.data == "Iframe button clicked"){
            /*Place Adobe Analytics Code*/
            _satellite.track("AACustomCall");
        }
    }

    if (window.addEventListener) {
        window.addEventListener("message", listenMessage, false);
    } else {
        window.attachEvent("onmessage", listenMessage);
    }

Remarquez que dans le code ci-dessus, nous avons référencé : _satellite.track("AAPageViewCall"); et _satellite.track("AACustomCall");. Cela signifie qu’il faut créer :

  • Une règle d’appel directe pour envoyer une demande d’image de vue de page.
  • Une règle d’appel directe pour envoyer une demande d’image de lien personnalisé

Remarque :

Besoin d’aide sur Adobe Analytics ? Rejoignez la communauté.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne