document.getElementById().onclick 在 Google 标签管理器中不工作

Question

我正在使用 cookie 许可管理服务，通过 Google 标签管理器（自定义 HTML 标签）调用它。他们的脚本具有函数 CookieControl.open();，可以打开侧边栏以允许用户更改他们的首选项。

<script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js"></script>
<script>
var config = {
...
...
...
};

CookieControl.load(config);

window.onload = function () {
    var cookiesExist = document.querySelector('#cookies');
    if (cookiesExist) {
        document.getElementById("cookies").onclick =
            function () {
                CookieControl.open();
            };
    }
};
</script>

在我的页脚中，我添加了一个 link <a id="cookies">Cookies</a>，GTM 中的函数应该以此为目标。不幸的是，这不起作用，当我点击“Cookies”link 时侧边栏没有打开。它有时会在 iPad 上的 Safari 上随机运行。但它并不一致。知道为什么大多数时候这行不通（但有时行得通）吗？

Answer 1

这是一个工作示例。

// https://codesandbox.io/s/agitated-leaf-vznep?file=/src/index.js

我们为按钮附加了一个点击事件侦听器，添加了一个 href 属性，并使用 e.preventDefault 函数阻止了它的默认行为。我们还为 CookieControl.open() 方法创建了一个专用函数。

您可能需要将脚本包装在此事件侦听器中，以确保在将单击事件侦听器附加到按钮之前文档已准备就绪。

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
    // move the content of index.js file here
});

更新：在上面的 link 过期的情况下复制了 Whosebug 沙箱中的脚本。

import "./styles.css";

// load cookie control

function openCookieControl(e) {
  console.log("CookieControl open");
  // CookieControl.open();
}

let button = document.getElementById("cookies");

button.addEventListener("click", (e) => {
  e.preventDefault();
  openCookieControl();
});

body {
  font-family: sans-serif;
  color: #000000;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/styles.css" />
  </head>

  <body>
    <a href="#" id="cookies">Cookies</a>

    <script src="src/index.js"></script>
  </body>
</html>

document.getElementById().onclick 在 Google 标签管理器中不工作

document.getElementById().onclick not working inside Google Tag Manager

javascript

getelementbyid

google-tag-manager