Question

通常包括分析是关于在html正文中粘贴跟踪代码，使用属性Id和网页浏览操作。我按照了答案 Tracking Google Analytics Page Views in Angular2并且在执行ng serve时它正确地包含了脚本，但是当生成生产时它不包含在索引中：

ng build --progress false --aot true -prod -e prod

在Angular2 Cli中包含Google Analytics或其他跟踪解决方案的最佳做法是什么？

提前致谢

Answer 1

您可以使用Angular-CLI将其与其余脚本捆绑在一起。

将Google Analytics代码放在名为google-analytics.js的文件中。确保删除脚本标记。

然后在angular-cli.json文件中，将google-analytics.js文件添加到scripts媒体资源中。

以下是angular-cli.json中代码的示例。

"scripts": [
    "google-analytics.js"
],

此代码段将导致angular-cli将google-analytics捆绑到名为scripts.bundle.js的文件中，该文件在运行时使用ng serve命令加载。

Answer 2

在angular-cli项目中，您可以在main.ts中进行操作-例如在这里，我们仅将GA添加到生产版本中

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {

    let ga_id = "UA-123456789-1" // google analytics id
    
    document.write(`<script async src="https://www.googletagmanager.com/gtag/js?id=${ga_id}"></script>`);

    const script1 = document.createElement('script');
    script1.innerHTML = `

        // Google Analytics

        window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${ga_id}', {
            'linker': {
            'domains': ['your-domain.com']
            }
        });
    `;
    document.head.appendChild(script1);

    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

environment.prod.ts必须包含字段production: true：

export const environment = {
  production: true,
  loginApi: 'https://my-api./v1',
};

Answer 3

Angular版本7：一种包含特定于环境的js的方法是

将脚本保存在某个路径：例如：src/assets/javascripts/prod.js
然后在angular.json中找到特定配置的构建配置（参考：here），并在所需的环境中添加其他脚本数组。
ng build --prod还将额外捆绑额外的脚本。

下面的示例使用生产环境进行演示，但这可以在任何环境中进行。

在下面采样angular.json。在Angular 7上进行了测试（请仅参考构建配置中的“ scripts”键，对文件进行了重大修改以仅显示相关部分）

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "test": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {},
          "configurations": {
            "production": {
              "scripts": ["src/assets/javascripts/prod.js"]
            }
          }
        }
      }
    }
  },
  "defaultProject": "test"
}

如何在Angular Cli应用程序中包含Google Analytics

3 个答案: