如何实施 google 分析电子商务增强仅使用 angular Npm 库没有 javaScript

How to implement google analytics ecommerce Enhanced for transaction only with angular Npm library no javaScript

你好,我正在为电子商务项目实施 google 分析,我已完成所有要求,但我只想在 google 分析中显示收入我研究了很多,但我得到 JavaScript 代码你可以检查一下 Here.

抱歉,我还没有使用 google 分析实现增强型电子商务,因为我不知道如何从 angular 包开始 npm

我找到了一些 google 分析库,您可以在下方查看

npm i analytics
npm i @analytics/google-analytics

My Expectation

如何在 angular 6

的电子商务网站中实现针对交易增强的简单电子商务

谢谢!

重要

  1. 首先你需要使用 dataLayer 然后 Google 将看到 dataLayer object 并将需求数据传递给 google 分析 服务器。

  2. 其次你需要安装包npm i angular-google-tag-manager如果你想阅读文档那么你可以查看Here.

  3. 在您的 constructor 中注入服务可能是感谢页面或根据您的要求,如下例所示。

    constructor(private gtmService: GoogleTagManagerService){ }

  4. 需要使用this.gtmService.pushTag()后我们会在pushTag函数中发送object

  5. 你需要在 pushTag 函数中传递 object 以及你将如何传递所以你需要检查 this 文档。

  6. 传递object中的动态值。

  7. ecommerceobject之前放'event': 'Purchase',和这个Purchase event我们在google标签管理器配置的时候会用到。

  8. 最后将你的 object 放入 pushTag 函数中,如下例

    this.gtmService.pushTag(purchaseObj);

为交易跟踪配置Google标签管理器的步骤

  1. 帐户登录Google标签管理器Here
  2. 转到工作区并单击标签并创建新标签。
  3. 根据您的选择更改无标题标签和命名 select Google Analytics:Universal Analytics
  4. Select 轨道类型 Event 因为我们将根据 dataLayer.
  5. 中的 event 检查
  6. 根据您在类别字段中的选择给出名称。
  7. 根据您在操作字段中的选择给出名称。
  8. Select True 来自非互动命中下拉列表。
  9. 检查了此标记中的启用覆盖设置。
  10. 您需要从 google 分析 帐户传递的跟踪 ID。
  11. 转到电子商务选中启用的增强型电子商务功能,然后选中使用 DataLayer
  12. 创建触发器单击触发器部分,您将看到新页面。
  13. 根据您的选择命名。
  14. 在事件名称字段中传递 EventName Purchase 我们在上面的点中放置 event: 'Purchase' 的地方。
  15. 单击保存保存保存...并提交并发布...

Note

交易跟踪需要 24 到 48 小时或 3 天才能反映在您的 google 分析帐户中。