我们如何在 ionic 应用程序中集成细分分析?
我已经浏览了“ https://segment.com/docs ”的文档,但没有发现任何关于离子应用程序集成的信息
我们如何在 ionic 应用程序中集成细分分析?
我已经浏览了“ https://segment.com/docs ”的文档,但没有发现任何关于离子应用程序集成的信息
我最终做的是把 Segment 提供的 analytics.js 脚本放到 index.html 中。然后在您的模板中,在您的导入下方和@Component 外部,通过写入“declare var analytics”来公开 Segment 脚本中可用的分析变量。
索引.html
<head>
<script src="cordova.js"></script>
<!-- Drop in script here -->
<script type="text/javascript">
!function(){var analytics=window.analytics=window.analytics||[]; if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="4.0.0";
analytics.load("YOUR_WRITE_KEY");
}}();
</script>
</head>
主页.ts
import {Component} from '@angular/core';
etc....
//expose analytics variable
declare var analytics;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor() {
analytics.page("Home");
}
myButton(){
analytics.track("Button Click");
console.log("My Button was clicked");
}
}
您可以在需要使用 Segment 的任何 ts 文件中声明分析。
不幸的是,应用程序示例中缺少文档。希望有足够的时间,人们会提出足够多的拉取请求,使文档有明确的指南。同时,我认为这将对您有所帮助:
(注意:这使用 Angulartics 将事件映射到 Segment 或其他分析工具。您可以绕过 Angulartics 部分,但为什么要重新发明轮子?)
<script> !function() ... </script>
. 将其复制并粘贴到您应用的index.html
文件中,靠近其部分的顶部。将 Angulartics 添加到您的项目中:
一个。在你的项目中安装 Angulartics:npm install angulartics2 --save
(之后,我建议您^
从文件中删除 on angulartics,package.json
以便将来安装确切的版本)
湾。在你的应用模块中包含 Angulartics:
代码(src/app/app.module.ts):
import {
Angulartics2Module,
Angulartics2Segment,
} from 'angulartics2'
...
@NgModule({
imports: [
Angulartics2Module.forRoot([ Angulartics2Segment ])
]
})
export class AppModule {}
import { Angulartics2Segment } from 'angulartics2'
...
export class SomeComponent {
constructor(private analytics: Angulartics2Segment) { }
public submitButtonClicked(){
let properties = {
foo: 'bar',
baz: 42,
etc: { some: 'thing' }
}
this.analytics.eventTrack('Event Action', properties)
}
}
现在,只要组件触发 submitButtonClicked() 方法,就会跟踪该事件。您可以向事件添加任何级别的属性,但请确保您的分析可视化工具可以理解架构。例如,如果您想在 Google Analytics 中跟踪事件,则需要将属性限制为 2 并将它们命名为“类别”和“标签”。