참고:

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

참고:

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

참고:

Need help on Adobe Analytics? Reach out to the Community

Additional resources

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책