путаница в gtag / google_tag_manager - PullRequest
Новая
       15

путаница в gtag / google_tag_manager

0 голосов
/ 11 октября 2019

Я использую Google Analytics для отслеживания пользовательских событий в моем приложении реагирования. Когда я впервые развернул код, я прочитал этот документ , предлагая использовать метод gtag вместо метода ga для регистрации вызовов. Это работает нормально.

Я использую Google Tag Manager, поэтому все эти скрипты загружаются через GTM (предположительно).

Теперь я делаю что-то более хитрое, сервер нуждаетсясказать клиенту войти на страницу загрузки в конкретном случае. Поэтому я адаптировал код инициализации GTM так, что событие запускается после загрузки GTM. Я читал, как это сделать здесь .

Странно то, что при обратном вызове, указывающем на загрузку библиотеки GTM, gtag не определяется и код для регистрации события в Analyticsвыходит из строя. К тому времени, когда я смогу набрать gtag в консоли браузера, он уже определен, поэтому, возможно, скрипт GTM загружает его вторично? ? Или есть способ узнать, когда объект gtag доступен после опроса (очень хочется этого избежать)?

Это код, который я использую для загрузки GTM 

class InitDataLayer extends Component {
    componentDidMount = () => {
        window.dataLayer = [{
            appName: 'promos',
        }];
    }
    render = () => (<script id="init-data-layer" />)
}

class LoadGtm extends Component {
    componentDidMount = () => {
        (function(w,d,s,l,i) {
            w[l]=w[l]||[];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event:'gtm.js'
            });
            var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),
                dl=l!='dataLayer'?'&l='+l:'';
                j.async=true;
                j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
                f.parentNode.insertBefore(j,f);

            j.addEventListener('load', () => {
                const _ge = new CustomEvent('gtm_loaded', { bubbles: true });
                d.dispatchEvent(_ge);
            });
        })(window,document,'script','dataLayer','GTM-XXXXXXX');
    }
    render = () => (<script id="load-gtm" />)
}

Ответы [ 2 ]

0 голосов
/ 11 октября 2019

Я понял, gtag определено в GTM! Затем я адаптировал тег с подходом, изложенным в моем вопросе, чтобы запустить пользовательское событие, указывающее, когда gtag доступно: 

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXXXXXX', {send_page_view: false});
  var _ge = new CustomEvent('gtag_loaded', { bubbles: true });
  document.dispatchEvent(_ge);
</script>

Теперь в коде клиента 

if(typeof gtag !== 'undefined') {
    gaSendEvent(event);
} else {
    window.addEventListener('gtag_loaded', () => {
        gaSendEvent(event);
    });
}
0 голосов
/ 11 октября 2019

Вы можете создавать события Google Analytics в интерфейсе менеджера тегов Google. Это не требует дополнительного кодирования. См. Ссылку https://support.google.com/tagmanager/answer/6107124?hl=en

...