Hinweis:

Dieser Artikel wurde von Alexis Cazes, Lead Technical Support Engineer bei Adobe, verfasst und bereitgestellt. Der Originaltext kann hier gefunden werden

 

Um einen Iframe zu verfolgen, ohne auf den Adobe Analytics-Code im iframe zu verweisen, verwenden Sie postMessage im iframe und erstellen Sie einen Ereignis-Listener für das Ereignis "message" im übergeordneten Element

Übergeordneter Code

<!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>

Weitere Informationen zu postMessage finden Sie hier

Hinweis:

Über DTM: Es ist möglich, eine Ereignisregel im DTM zu erstellen, basierend auf Benutzerdefinition und Suche nach dem Ereignis „Nachricht“. DTM-Ingenieure bestätigten, dass dies momentan nicht möglich ist. Wenn wir den passenden Selektor einer Regel suchen, verwenden wir document.querySelector, und document.querySelector („window“) liefert keine Ergebnisse.

Mögliche Lösung

Eine mögliche Lösung wäre, den folgenden Code über eine Seitenlade-Regel zu laden:

  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);
    }

Beachten Sie, dass wir im obigen Code verwiesen haben: _satellite.track("AAPageViewCall"); und _satellite.track ("AACustomCall"); . Dies bedeutet, dass wir Folgendes erstellen werden:

  • Eine Direktrufregel zum Senden einer Seitenaufruf-Bildanforderung
  • Eine Direktrufregel zum Senden einer benutzerdefinierten Link-Bildanforderung

Hinweis:

Benötigen Sie Hilfe zu Adobe Analytics? Wenden Sie sich an die Community

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie