Question

我的公司要求我将跟踪数据发送到<head>中定义的全局功能，以便分析团队可以对其进行处理。他们不知道角度2，框架等，并希望它与文档完全一样：无异常。

<head>
...
  <script type="text/javascript">

    function sendAnalytics(data) {
      console.log("GTM data sent" + data);

    };
    var gaData = [_dl];
</script>
</head>

所以在我的角度服务中，我调用全局定义的函数，如此

window['sendAnalytics'](GTMData_Object);

这适用于页面加载但是当我转到各种路由时，全局定义的函数不再运行了吗？

我试过这样的NG区域，但仍然没有运气。

 this.zone.runOutsideAngular(() =>  window['sendAnalytics'](GTMData_Object);)

我知道有更好的方法来处理Angular 2中的Google标记管理器，但显然，我不允许这样做（我试过了！）。

编辑：该网站使用路由为我们想要跟踪的每个使用的交互。我总是看到数据的console.log（）进入，所以它正在传递给服务好。在初始页面加载后，我停止在全局函数中获取日志。

服务方法示例

 search_result_clicks(
        search_term: string,
    ): void {
        let trackObject = {
            'site_events': {
                'search_click': search_term
            };       
         console.log(trackObject);
        //push to GTM via global function defined in header
            try { window['sendAnalytics'](trackObject); } 
catch (err) {
 this.handleError(err); 
}
        }

编辑：如果我将脚本标记和函数放在<app-root>元素内，那么angular可以定期作为全局访问它。不适用于头部或身体。它仍然在index.html上，看起来尽可能接近。

EDIT2：如果放在<app-root>

以下，也可以在身体中运作

对于这种情况下的其他任何人......

标题中的

全局函数+ angular 2 = bad;必须放在下面或在app-root

字符串，数组，标题中的对象的全局变量+ angular 2 = okay;到目前为止，GTM工作得很好。

在app-root或page of bottom下面的索引html中定义的全局函数和变量= okay。

Answer 1

根据您的问题，我了解您要跟踪每个导航页面。为此，您可以使用router event来跟踪导航。但我认为这个功能是在Angular4中引入的。

OR

我尝试了类似的代码，它对我有用。你在构造函数中调用此方法吗？因为它只创造了一次。

<div>

https://plnkr.co/edit/m7NHXIC6JrXLaW9wdwu1?p=preview

Answer 2

您可以将外部函数作为提供者提供角度，并在整个应用程序中共享。什么时候你会打电话给它，它会调用全局函数。

您可以查看与您的问题相似的this answer。

window.sharedService = new SharedService();

@NgModule({
  providers: [{provide: SharedService, useValue: window.sharedService}],
  ...
})
class AppModule1 {}

@NgModule({
  providers: [{provide: SharedService, useValue: window.sharedService}],
  ...
})
class AppModule2 {}


class MyComponent {
  constructor(private zone:NgZone, private sharedService:SharedService) {
    sharedService.someObservable.subscribe(data => this.zone.run(() => {
      // event handler code here
    }));
  }
}

希望有所帮助

Angular 2：调用在header中全局定义的函数只适用于页面加载？不是每次都？

2 个答案: