Observação:

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

Observação:

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

Observação:

Need help on Adobe Analytics? Reach out to the Community

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online