将AngularJS与Google Tag Manager集成

我们从Google获取代码段，但是当我将它插入index.html时，控制台会出现错误，并且整个应用程序无法启动。将AngularJS与Google Tag Manager集成

只是</body>之前插入谷歌标签管理器的代码后，整个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)

如果我删除谷歌标签管理器代码，那么没有任何问题。所以我相信这个错误是由它造成的。

更新：原来是webpack问题。 https://github.com/webpack/webpack-dev-server/issues/381

来源

2017-01-30 Benjamin Li

该错误实际上表明模块存在问题。总之，如果你想使用谷歌标签管理器的角度来我会建议你使用Angulartics

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

来源

2017-01-30 02:05:01 Sajeetharan

我从http://www.lunametrics.com/blog/2016/02/15/what-is-google了解到-tag-manager /，google分析和Google标签管理器可以单独工作。是否有必要使用Google Analytics？ –

@BenjaminLi是的，这是可能的。但是当你通过这个库时，它使你的工作变得简单 – Sajeetharan

将AngularJS与Google Tag Manager集成

回答

相关问题