我们如何在离子应用程序中集成细分分析？
我已经浏览了"https://segment.com/docs"的文档，但没有找到有关离子应用集成的任何内容
不幸的是，该文档缺少应用程序示例。希望有足够的时间，人们会提出足够的拉取请求，以便文档有明确的指南。同时，我认为这将对您有所帮助：
(注意：这使用 Angulartics 将事件映射到区段或其他分析工具。你可以绕过棱角部分，但为什么要重新发明轮子？
- 您需要做的第一件事是在应用中包含区段库。它们在来源的概览屏幕中提供代码段(https://segment.com/yoda/sources/{来源名称}/概览(。这将看起来像
<script> !function() ... </script>.将其复制并粘贴到应用的index.html文件中，靠近其部分顶部。 -
将角度添加到您的项目中：
a. 在您的项目中安装 Angulartics：
npm install angulartics2 --save(之后，我建议您从
package.json文件中删除角度^，以便将来安装确切的版本(b. 在应用模块中包含角度：
代码 (src/app/app.module.ts(：
import {
Angulartics2Module,
Angulartics2Segment,
} from 'angulartics2'
...
@NgModule({
imports: [
Angulartics2Module.forRoot([ Angulartics2Segment ])
]
})
export class AppModule {}
- 开始在代码中使用 Angulartics 包：
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，并将其命名为"类别"和"标签"。
我最终做的是将 Segment 提供的分析.js脚本删除到 index.html 中。然后在模板中，在导入下方和外部@Component，通过写入"声明变量分析"来公开分段脚本中可用的分析变量。
索引.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>
首页
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");
}
}
您可以在需要使用分段的任何 ts 文件中声明分析。