Как мы можем интегрировать сегментную аналитику в гибридное ионное приложение?

Как мы можем интегрировать сегментную аналитику в ионное приложение?

Я просмотрел документацию "https://segment.com/docs", но ничего не нашел относительно интеграции в ионное приложение


angular hybrid-mobile-app ionic2 segment-analytics
person Dharamveer Miglani    schedule 12.07.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

К сожалению, в документации отсутствуют примеры приложений. Будем надеяться, что со временем люди сделают достаточно пулл-реквестов, и в документации появятся четкие инструкции. В то же время, я думаю, что это поможет вам:

(ПРИМЕЧАНИЕ: здесь используется Angulartics для сопоставления событий с сегментами или другими инструментами аналитики. Вы можете обойти части Angulartics, но зачем изобретать велосипед?)

  1. Первое, что вам нужно сделать, это включить библиотеку Segment в свое приложение. Они предоставляют фрагмент на экране обзора вашего источника (https://segment.com/yoda/sources/{имя вашего источника}/обзор). Это будет выглядеть примерно так: <script> !function() ... </script>. Скопируйте и вставьте это в файл index.html вашего приложения в верхней части его раздела.

  2. Добавьте Angulartics в свой проект:

    а. Установите Angulartics в свой проект: npm install angulartics2 --save

    (после этого я предлагаю вам удалить ^ по ангуляртике из вашего файла package.json, чтобы в будущем устанавливалась точная версия)

    б. Включите Angulartics в свой модуль приложения:

Код (src/app/app.module.ts):

import {
  Angulartics2Module,
  Angulartics2Segment,
} from 'angulartics2'

...

@NgModule({
  imports: [
    Angulartics2Module.forRoot([ Angulartics2Segment ])
  ]
})
export class AppModule {}
  1. Начните использовать пакет 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 и назвать их «категория» и «метка».

person AJ Zane    schedule 31.08.2017

arrow_upward
1
arrow_downward

В итоге я перекинул предоставленный Segment скрипт analytics.js в index.html. Затем в ваших шаблонах, под вашим импортом и вне @Component, выставьте переменную аналитики, доступную в сценарии сегмента, написав «объявить аналитику var».

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

}

Вы можете объявить аналитику в любом файле ts, который вам нужен для использования Segment.

person Kelly Crowther    schedule 07.09.2017