Question

我正在使用Google Analytics（分析）来跟踪我的应用程序中的自定义事件。首次推出代码时，我读了this document，建议使用gtag方法而不是ga方法进行日志记录调用。一切正常。

我正在使用Google跟踪代码管理器，因此这些脚本都是通过GTM加载的（大概是）。

现在我正在做些棘手的事情，服务器需要告诉客户端在特定情况下登录页面加载。因此，我修改了GTM初始化代码，以便在GTM加载后触发一个事件。我读了如何做here。

奇怪的是，当指示GTM库已加载的回调未触发时，gtag未定义，并且在Analytics（分析）中记录事件的代码失败。到我可以在浏览器控制台中输入gtag的时候定义它了，那么也许GTM脚本正在第二次加载它？

if (!!window.google_tag_manager) {
  // Google Tag Manager has already been loaded
  doSomethingWith(window.google_tag_manager);
} else {
  window.addEventListener('gtm_loaded', function() {
    //----------------------------------------
    // Google Tag Manager has been loaded, but
    // gtag object is not defined :(
    //----------------------------------------
  });
}

还有其他方法可以通过google_tag_manager对象记录Analytics事件吗？或者，是否有一种方法可以知道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" />)
}

Answer 1

您可以在Google跟踪代码管理器界面中创建Google Analytics（分析）事件。这不需要其他编码。参见参考文献https://support.google.com/tagmanager/answer/6107124?hl=en

Answer 2

我意识到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);
    });
}

gtag / google_tag_manager的困惑

2 个答案: