Piezīme.

This article has been authored and contributed by Alexis Cazes, Lead Technical Support engineer at Adobe. The original text can be found here

 

To track an iframe without referencing Adobe Analytics code in the iframe, use postMessage in the iframe and create an event listener on event "message" in the parent

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

More details about postMessage can be found here

Piezīme.

About DTM: It is possible to create an event rule in DTM based on custom and looking for event "message". DTM engineers confirmed that it is not possible at the moment.When matching the selector of a rule we are using document.querySelector, anddocument.querySelector('window') will return nothing.

Possible Solution

A possible solution would be to load the following code via a page load rule:

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

Notice that in the code above we have referenced: _satellite.track("AAPageViewCall"); and _satellite.track("AACustomCall"); . This means that we will create:

  • One direct call rule to send a pageview image request
  • One direct call rule to send a custom link image request

Piezīme.

Need help on Adobe Analytics? Reach out to the Community

Šis darbs ir licencēts saskaņā ar Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported licenci  Uz portālā Twitter™ un Facebook izvietotajiem ziņojumiem neattiecas Creative Commons sistēmas noteikumi.

Juridisks paziņojums   |   Tiešsaistes konfidencialitātes politika