Ionic 4 + Stenciljs - 添加对 google 分析的支持

Question

我正在使用一组有趣的框架 Ionic 和 Stenciljs - 我不想在那里添加任何东西（没有 angular、vue 等），因此我面临一些问题。

我目前正在尝试了解如何向我的应用程序添加 google 分析，以及如何使用网络组件跟踪其他操作（例如 - ionic-radio 更改、ionic-slides 和那里的行动）。我希望我可以通过模板路由来处理这个问题——但我不能没有 angular。

我迷路了。

没有 angular 我找不到任何东西 - 我相信我能看到的唯一选择是添加来自 google 的 js 片段 - 但这是真的吗？

Answer 1

所以解决方案比预期的要简单。您不需要额外的框架 - 您可以这样做：

在您的 index.html 文件中：

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  //TODO: change to prod tracking ID!
  ga('create', 'UA-XXXX-X', 'auto');

  // Replace the following lines with the plugins you want to use.
  ga('require', 'eventTracker');
  ga('send', 'pageview');
  </script>
  <script async src="https://www.google-analytics.com/analytics.js"></script>
  <script async src="/assets/js/autotrack.js"></script>

然后在每个组件中，你需要跟踪你必须添加几个标签的动作，我的例子：

<ion-button class="onboardin-action-button" slot="start" onClick={() => this.skipButtonClickHandler()} ga-on="click" ga-event-category="Onboarding" ga-event-action="skipped" >Skip </ion-button>

在哪里： ga-on --> 我们正在跟踪的操作 ga-event-category --> 由我们定义的将在 GA 中可见的事件类别 ga-event-action --> 由我们定义的将在 GA 中可见的事件操作

希望对某人有所帮助 :)

Ionic 4 + Stenciljs - 添加对 google 分析的支持

Ionic 4 + Stenciljs - adding support for google analytics

progressive-web-apps

stenciljs

ionic4