Question

我们如何在离子应用程序中集成Segment Analytics？

我已经阅读了＆＃34; https://segment.com/docs＆＃34;的文档。但没有找到任何关于离子应用中的整合的内容

Answer 1

遗憾的是，文档缺少应用程序示例。希望有足够的时间，人们会提出足够的拉动请求，文档有明确的指导。与此同时，我认为这会对你有所帮助：

（注意：这使用Angulartics将事件映射到Segment或其他分析工具。您可以绕过Angulartics部分，但为什么要重新发明轮子？）

您需要做的第一件事是在您的应用中包含细分库。他们在您的来源概述屏幕（https://segment.com/yoda/sources/ {您的来源名称} /概述）中提供了摘要。这看起来像<script> !function() ... </script>。将其复制并粘贴到应用的index.html文件中，靠近其顶部。
将Angulartics添加到您的项目中：

一个。在项目中安装Angulartics：npm install angulartics2 --save

（之后，我建议您从^文件中移除package.json有关angulartics的内容，以便将来安装确切的版本）

湾在您的应用模块中加入Angulartics：

代码（src / app / app.module.ts）：

import {
  Angulartics2Module,
  Angulartics2Segment,
} from 'angulartics2'

...

@NgModule({
  imports: [
    Angulartics2Module.forRoot([ Angulartics2Segment ])
  ]
})
export class AppModule {}

在代码中开始使用Angulartics包：

＆＃13;

    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)
      }
    }

＆＃13;

现在，只要组件触发submitButtonClicked（）方法，就会跟踪事件。您可以向事件添加任何级别的属性，但请确保您的分析可视化工具可以理解该架构。例如，如果您要跟踪Google Analytics中的事件，则需要将属性限制为2并将其命名为＆＃34; category＆＃34;和＆＃34;标签＆＃34;。

Answer 2

我最终做的是将Segment提供的analytics.js脚本放入index.html。然后在模板中，在导入下面和@Component外部，通过写入声明var analytics＆＃39;来公开Segment脚本中可用的分析变量。

<强>的index.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>

<强> home.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文件中声明分析。

我们如何在混合离子应用程序中集成Segment Analytics？

2 个答案: