将AngularJS与Google跟踪代码管理器集成

时间:2017-01-30 01:55:46

标签: angularjs google-tag-manager

我们从Google获取了代码段,但是当我将其插入index.html时,控制台会出错,并且整个应用都没有启动。

</body>之前插入Google跟踪代码后,整个index.html就像这样:

<!doctype html>
<html ng-app="app" lang="en">

<head>
    <meta charset="utf-8">
    <title ng-bind="title"></title>
    <base href="/">
    <!- some scripts and link go here ->
    //scripts and link
</head>

<body>
    <div class="container main-container">
        <ui-view></ui-view>
    </div>

        <!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-5QMF5WC"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5QMF5WC');</script>
<!-- End Google Tag Manager -->
</body>
</html>

然而,它不起作用。控制台总是出现以下错误:

client?cd17:5 Uncaught TypeError: Cannot read property 'replace' of null
    at Object.eval (eval at <anonymous> (app.bundle.js:167), <anonymous>:5:77)
    at eval (eval at <anonymous> (app.bundle.js:167), <anonymous>:98:30)
    at Object.<anonymous> (app.bundle.js:167)
    at __webpack_require__ (app.bundle.js:20)
    at Object.<anonymous> (app.bundle.js:47)
    at __webpack_require__ (app.bundle.js:20)
    at app.bundle.js:40
    at app.bundle.js:43
(anonymous) @ client?cd17:5
(anonymous) @ client?cd17:96
(anonymous) @ app.bundle.js:167
__webpack_require__ @ app.bundle.js:20
(anonymous) @ app.bundle.js:47
__webpack_require__ @ app.bundle.js:20
(anonymous) @ app.bundle.js:40
(anonymous) @ app.bundle.js:43
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=app&p1=Error%3A%20%…20Ac%20(http%3A%2F%2Flocalhost%3A8080%2Fvendor%2Fangular.min.js%3A21%3A332)
    at angular.min.js:6
    at angular.min.js:40
    at q (angular.min.js:7)
    at g (angular.min.js:39)
    at db (angular.min.js:43)
    at c (angular.min.js:21)
    at Ac (angular.min.js:21)
    at fe (angular.min.js:20)
    at angular.min.js:315
    at HTMLDocument.b (angular.min.js:188)

如果我删除了Google代码管理器代码,则没有任何问题。所以我确定错误是由它引起的。

更新: 事实证明是webpack问题。 https://github.com/webpack/webpack-dev-server/issues/381

1 个答案:

答案 0 :(得分:0)

错误实际上表明模块存在问题。无论如何,如果你想使用带有角度的谷歌标签管理器,我建议你使用Angulartics

 var yourApp = angular.module('YourApp', ['angulartics', 'angulartics.google.analytics'])