Iframe 事件

广告主可以跟踪其广告中的事件。这些事件在客户端浏览器中借助 JavaScript 直接以程序方式管理。

事件

creativeDisplayed

这仅适用于 桌面端全页插页广告 和 移动端全页插页广告 (DFPI/MFPI) 广告格式活动，使用 iframe URL 变体。

当广告展示给用户时，会向 iframe 中发送一条名为 creativeDisplayed.

你可以通过使用下面的脚本在你的 iframe 中跟踪此事件；该脚本会添加一个事件监听器，在广告展示给用户时捕获发送的消息。

<script>
        function readMessage(event) {
            console.log("readMessage 事件");
            console.log("来源: " + event.origin);
            console.log("数据: " + event.data);
        }

        if (window.addEventListener) {
            // 适用于符合标准的网页浏览器
            window.addEventListener("message", readMessage, false);
        } else {
            window.attachEvent("onmessage", readMessage);
        }
</script>

示例 - 全页插页广告

<!DOCTYPE html>
<html>
<head>
    <!-- 事件部分 -->
    <script>
        function readMessage(event) {
            console.log("readMessage 事件");
            console.log("来源: " + event.origin);
            console.log("数据: " + event.data);
            var message = "我们收到消息：'" + event.data + "'，来自 '" + event.origin + "'（我们现在位于广告主 iframe 中）";
            console.log(message);
            document.getElementById("received-message").innerHTML = message;
            // 即：广告主想要更新某个元素
        }
        if (window.addEventListener) {
            // 适用于符合标准的网页浏览器
            window.addEventListener("message", readMessage, false);
        } else {
            window.attachEvent("onmessage", readMessage);
        }
    </script>
    <!-- 事件部分结束 -->
</head>
<body>
    <h1>我的测试 iframe 标题</h1>
    <p>我的测试 iframe 段落</p>
    <p id="received-message">等待消息</p>
</body>
</html>

最后更新于 2个月前

这有帮助吗？

<!DOCTYPE html>
<html>
<head>
    <!-- 事件部分 -->
    <script>
        function readMessage(event) {
            console.log("readMessage 事件");
            console.log("来源: " + event.origin);
            console.log("数据: " + event.data);
            var message = "我们收到消息：'" + event.data + "'，来自 '" + event.origin + "'（我们现在位于广告主 iframe 中）";
            console.log(message);
            document.getElementById("received-message").innerHTML = message;
            // 即：广告主想要更新某个元素
        }
        if (window.addEventListener) {
            // 适用于符合标准的网页浏览器
            window.addEventListener("message", readMessage, false);
        } else {
            window.attachEvent("onmessage", readMessage);
        }
    </script>
    <!-- 事件部分结束 -->
</head>
<body>
    <h1>我的测试 iframe 标题</h1>
    <p>我的测试 iframe 段落</p>
    <p id="received-message">等待消息</p>
</body>
</html>