代码之家 › 专栏 › 技术社区 › tzim

Ionic 4+Stenciljs-增加对谷歌分析的支持

stenciljs ionic4 progressive-web-apps

0

tzim · 技术社区 · 7 年前

我正在玩一套有趣的框架Ionic和Stenciljs——我不想再添加任何东西(没有angular、vue等),因此我面临一些问题。

我目前正在尝试了解如何将google analytics添加到我的应用程序中,以及如何使用web组件跟踪其他操作(例如,ionic radio更改、ionic幻灯片和其中的操作)。我希望我可以通过模具布线来处理这个问题,但如果没有模具,我就做不到。

我迷路了。

如果没有angular,我找不到任何东西——我相信我能看到的唯一选择是添加来自谷歌的js片段——但这是真的吗?

0 回复 | 直到 7 年前

1

tzim 7 年前

因此,解决方案比预期的简单。你不需要额外的框架——你可以这样做:

在你的索引中。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活动类别-->由美国活动类别定义,将在GA中可见 ga事件行动-->由美国事件行动定义,将在GA中可见

希望这能帮助别人:)