注意:

この記事は、アドビシステムズ社のリードテクニカルサポートエンジニアの Alexis Cazes 氏が作成および提供しました。元のテキストはこちらで見ることができます。

 

インラインフレーム内で Adobe Analytics コードを参照せずにインラインフレームを追跡するには、インラインフレームで postMessage を使用し、親のイベント「メッセージ」にイベントリスナーを作成します。

親コード

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

インラインフレーム

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

postMessage メニューの詳細については、こちらを参照してください。

注意:

DTM について:カスタムおよびイベント「メッセージ」の外観に基づいて、DTM にイベントルールを作成することが可能です。DTM エンジニアは、現時点ではそれは不可能だと認めました。ルールのセレクターを一致させるときは、document.querySelector を使用しています。この場合、document.querySelector (' window ') は何も返しません。

考えられる解決策

解決方法としては、ページロードルールを経由して次のコードを読み込みします。

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

上のコードで参照したのは:_satellite.track (" AAPageViewCall ");および _satellite.track (" AACustomCall ");つまり、次のことを行います:

  • pageview 画像リクエストを送信するための直接呼び出しルール
  • カスタムリンク画像リクエストを送信するための直接呼び出しルール

注意:

Adobe Analytics のヘルプが必要ですか?コミュニティを利用してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー