Блог

Главная - Вопросы по программированию - document.getElementById().onclick не работает в диспетчере тегов Google

document.getElementById().onclick не работает в диспетчере тегов Google

#javascript #google-tag-manager #getelementbyid

Вопрос:

Я использую службу управления согласием на использование файлов 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>

В моем нижнем колонтитуле я добавил ссылку <a id="cookies">Cookies</a> , на которую должна быть нацелена функция в GTM. К сожалению, это не работает, и боковая панель не открывается, когда я нажимаю на ссылку «Файлы cookie». Иногда это работает случайным образом в Safari на iPad. Но это непоследовательно.
Есть идеи, почему в большинстве случаев это не работает (но в других случаях это работает)?

Комментарии:

1. Вы подтвердили (с помощью простой консоли. журнал или что-то в этом роде), что ваша функция вообще выполняется? Использование window.onload = … опасно, это может быть легко перезаписано другими функциями скрипта. Вы должны переписать это, чтобы правильно использовать addEventListener.

Ответ №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
});

ОБНОВЛЕНИЕ: Дублировал сценарий в песочнице 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>
Метки: