Javascript Angular 2环境特定头部注射

我正在为我的Angular2应用程序添加Google Tag Manager支持，我不明白如何使用不同的容器ID为所需的GTM脚本注入开发和生产，因为我在GTM中有两个容器

有没有一种方法可以根据我的环境文件中的变量注入head标记并更改容器ID

---

我正在使用Angular CLI作为构建过程的一部分。

您可以为Tag Manager构建一个服务，我自己也为我的公司项目构建了一个服务，它为提供商处理多个容器ID和事件，如

AdWords

，

Google Trusted Stores

和

Analytics

这是注入标记管理器脚本的模型的示例版本。（注意：由于直接使用

文档

和

窗口

，因此它不是万能的。）

服务示例：

@Injectable（）
出口类服务{
私有静态实例：TagManager=null；
private eventTracker$：ReplaySubject=新的ReplaySubject（）；
私有数据流$：ReplaySubject=新ReplaySubject（）；
私人货币：字符串；
专用精度：数字=3；
专用语言：字符串；
私有readyTracker$：ReplaySubject=新ReplaySubject（）；
公共获取设置（）{
返回{
语言：这种语言，
货币：这个。货币，
精确性：这个
}
}
公共获取事件跟踪$（）{
返回此.eventTracker$.asObservable（）；
}
公共获取数据层$（）{
返回此.dataStream$.asObservable（）；
}
公共获取已就绪$（）{
返回此.readyTracker$.asObservable（）；
}
公众得到初始化（）{
return！！Service.instance；
}
构造函数（）{
this.readyTracker$.next（false）；
}
public init（containerIds？：string[]，dataLayerName？：string，语言？：string，货币？：string）{
if（TagManager的Service.instance实例）{
console.error（'谷歌标签管理器已经加载'）；
返回；
}
Service.instance=TagManager.getInstance（containerID | |【】，dataLayerName | | | | |'dataLayer'，语言| |'en'，货币| |'EUR'）；
这个。货币=货币；
这种语言=语言；
如果（！Service.instance）{
控制台信息（“未安装gtm容器”）；
返回；
}
此.dataLayer$.subscribe（e=>{
Service.instance.dataLayer.push（e）；
});
this.readyTracker$.next（true）；
}
公共推送（数据：任意）{
this.dataStream$.next（数据）；
}
public pushCustomEvent（事件名称：字符串，属性：任意）{
这个，推({
事件：eventName，
属性：属性
});
}
公共pushEcommerceEvent（eventName:string，eventData:any）{
this.push（Object.assign（{}）{
事件：eventName
}，事件数据）
}
}

我正在查看angulartics2，但您仍然需要在head部分添加跟踪代码。。我可能会尝试类似于你在这里所做的事情。我想您可以命名gtm init函数，然后在服务构造函数中调用它。您可以在服务中使用

TagManager.getInstance

对其进行初始化（如果您需要

en

和

EUR

以外的其他内容，它会收集您的容器、语言和货币）。我添加了一个服务示例。

export class TagManager {
private static instance: TagManager = null;
private ids: string[];
private dataLayerName: string;
private precision: number = 2;

public dataLayer: any[] = [];
public language: string;
public currency: string;

constructor(ids: string[], dataLayerName: string, language: string, currency: string) {
  if(TagManager.instance) {
    throw new Error("Error - use GoogleTagManager.getInstance()");
  }
  this.ids = ids;
  this.dataLayerName = dataLayerName;
  this.currency = currency;
  this.language = language;
  this.init();
}

private init() {
  this.ids.forEach(id => this.initContainer(id));
}

private initContainer(id: string) {
  let internal = this;
  (function(w,d,s,l,i) {
    w[l]=w[l]||[];
    w[l].push({
      'gtm.start': new Date().getTime(),
       event:'gtm.js'
    });
    let f: any = d.getElementsByTagName(s)[0];
    let j: any = d.createElement(s);
    let dl: any = l!='dataLayer'?'&l='+l:'';
    j.async=true;
    j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;
    f.parentNode.insertBefore(j,f);
    internal.dataLayer = w[l];
  })(window,document,'script',this.dataLayerName,id);
}

public static getInstance(ids: string | string[] = [], dataLayerName = 'dataLayer', language = 'en', currency = 'EUR') {
    ids = ids || [];
    ids = Array.isArray(ids)? ids: [ids];
    if(!TagManager.instance) {
      if(ids.length === 0) {
        return;
      }
      ids.forEach(id => {
        if(!id || (typeof id !== 'string') || id.indexOf('GTM-') !== 0) {
          console.error("Please provide a valid container ID (i.e. GTM-XXXXXX)");
        }
      })
      if(!dataLayerName || (typeof dataLayerName !== 'string')) {
        console.error("Please provide a valid name for the data layer");
      }
   }
   TagManager.instance = TagManager.instance || new TagManager(ids,   dataLayerName, language, currency);
   return TagManager.instance;
  }
}