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

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

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

Источник

2 ответа

В итоге я бросил скрипт analytics.js, предоставленный Segment, в index.html. Затем в ваших шаблонах, под вашими импортами и за пределами @Component, откройте переменную аналитики, доступную в сценарии Segment, написав в файле "Declare Var Analytics".

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, который вам нужен для использования сегмента.

Источник

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

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

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

  2. Добавьте Angulartics к вашему проекту:

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

    (впоследствии я предлагаю вам удалить ^ на angulartics от вашего 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 и назвать их "категория" и "метка".

Источник
Другие вопросы по тегам