Google 标签管理器、requirejs 和 Aurelia CLI

Google Tag Manager, requirejs and the Aurelia CLI

我有一个 Aurelia CLI application into which I'm trying to include de Google Tag Manager 脚本

<head>
    <!-- Google Tag Manager -->
    <!--<script>
        var dataLayer = [];
        dataLayer.push({ 'event': 'hixo' });
    </script>
    <script>
        (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);
        })(window, document, 'script', 'dataLayer', 'GTM-PLSZRC');
    </script>-->
    <!-- End Google Tag Manager -->
</head>

但是我一启动应用程序就收到以下 requirejs 错误:

"Mismatched anonymous define() modules"

Aurelia CLI 使用 requirejs,但它是完全抽象的,所以我应该在哪里以及如何定义 Google 标签管理器脚本,以便它不作为匿名模块处理?

加载 google 标签管理器脚本后首次使用 dataLayer.push() 时,GTM 将加载其他脚本。这些脚本是异步加载的,因此这些脚本将在 aurelia-cli 包(以及该包内的 requirejs)加载后完成加载。这就是 RequireJS 抱怨匿名定义错误的原因,即使 GTM 脚本标记包含在 before aurelia-cli 包中。

Google 跟踪代码管理器加载的脚本之一是来自 this URL. Currently this is version 1.4.1 of Fingerprint2, and in the GitHub repository there is this issue mentioning the same Mismatched anonymous define() error. It seems to be fixed by this PR 的 Fingerprint2,但是由于 Google 跟踪代码管理器加载了 Fingerprint2(并且我们无法覆盖此行为),我们需要让它工作的解决方法。

解决方法是使用脚本标记自己同步加载 Fingerprint2,然后告诉 RequireJS 忽略源自 Google 标签管理器第二次加载 Fingerprint2 的 Mismatched anonymous define() 错误:

<script src="http://www.clickcease.com/monitor/stat.js"></script>
<script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
<script>
  requirejs.onError = function (err) {
    if (err.message.indexOf('Fingerprint2') === -1) {
      throw err;
    }
  };
</script>

希望 Clickcease 尽快更新他们的 Fingerprint2 版本,以便不再需要此解决方法。