我正在使用cookie同意管理服务，通过谷歌标签管理器(自定义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>
在我的页脚中，我添加了一个链接<a id="cookies">Cookies</a>，GTM中的函数应该针对它。不幸的是，这不起作用，当我点击"；Cookie"；链接它有时确实可以在iPad上的Safari上随机工作。但这并不一致。有什么想法吗？为什么大多数时候都不起作用(但其他时候起作用(？
这是一个工作示例。
//https://codesandbox.io/s/agitated-leaf-vznep?file=/src/index.js
我们为按钮附加了一个点击事件监听器，添加了一个href属性，并通过使用e.preventDefault函数来防止其默认行为。我们还为CookieControl.open()方法创建了一个专用函数。
在将click事件侦听器附加到按钮之前，您可能需要将脚本包装在此事件侦听器中，以确保文档已准备好。
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
// move the content of index.js file here
});
更新：在stackoverflow沙盒中复制了脚本，以防上面的链接过期。
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>