Динамически загружайте Google Tag Manager и переключайтесь в SPA - PullRequest
Новая
       14

Динамически загружайте Google Tag Manager и переключайтесь в SPA

0 голосов
/ 04 июля 2018

Отдел маркетинга хочет разделить Менеджер тегов Google для каждой страны. Для обычного веб-сайта, а не SPA, мы можем легко сделать это на основе URL. Если клиент переключится на другой URL, тогда страница будет обновлена, код страны будет добавлен в URL, и будет загружен правильный GTM.

Теперь для SPA (на Angular, Typescript) это немного сложнее. В настоящее время у нас нет параметра языка / страны в этом приложении, но его можно изменить в любом случае по всему веб-приложению. Конечно, страница не будет обновлена.

Я пытаюсь найти способ динамически загружать и выгружать скрипт GTM.

Я могу успешно загрузить и выгрузить элемент <script> в <head>, но менеджер тегов добавляет больше элементов. 

public loadScriptSimple(country : string) {
    //first remove existing node
    var existing = document.getElementById("tagmanager");
    if (existing && existing.parentNode) {
        existing.parentNode.removeChild(existing);
    }
    //
    console.log('adding node to head...');
    let node = document.createElement('script');
    if (country === "NL") {
        node.textContent =
            "(function (w, d, s, l, i) {w[l] = w[l] ....(window, document, 'script', 'dataLayer', 'GTM-XXX');";
    } else {//todo for later loading others
        node.textContent =
            "(function (w, d, s, l, i) {w[l] = w[l] ....(window, document, 'script', 'dataLayer', 'GTM-YYY');";
    }

    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    node.setAttribute("id", "tagmanager");
    document.getElementsByTagName('head')[0].appendChild(node);
    console.log('loaded script');
}

Источник: https://stackoverflow.com/a/38473334/2901207

Таким образом, можно было бы загрузить его по первому запросу (например, при первом выборе страны на основе IP), но после изменения страны будут загружены два тега.

Есть ли какой-нибудь простой способ удалить существующие элементы, а затем создать новые, как указано выше?

...