How Can we Integrate Segment Analytics in hybrid ionic app?

Question

How Can we Integrate Segment Analytics in hybrid ionic app?

1.3k Views Asked by Dharamveer Miglani At 20 October 2024 at 09:22

How Can we Integrate Segment Analytics in ionic app ?

I have gone through the documentation of "https://segment.com/docs" but didn't found anything regarding integration in ionic application

Original Q&A

There are 2 best solutions below

**AJ Zane** · Answer 1

The documentation is unfortunately lacking in application examples. Hopefully, with enough time, people will make enough pull requests that the docs have clear guides. In the mean time, I think this will help you:

(NOTE: This uses Angulartics to map events to Segment or other analytics tools. You could bypass the Angulartics parts, but why reinvent the wheel?)

The first thing you'll need to do is include the Segment library in your app. They provide the snippet in your Source's overview screen (https://segment.com/yoda/sources/{your source's name}/overview). This is going to look something like <script> !function() ... </script>. Copy and paste this into your app's index.html file, near the top of its section.
Add Angulartics to your project:

a. Install Angulartics in your project: npm install angulartics2 --save

(afterwards, I suggest that you remove the ^ on angulartics from your package.json file so that the exact version is installed in the future)

b. Include Angulartics in your App Module:

Code (src/app/app.module.ts):

import {
  Angulartics2Module,
  Angulartics2Segment,
} from 'angulartics2'

...

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

Start using the Angulartics package in your code:

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

Now, whenever the component triggers the submitButtonClicked() method, the event will be tracked. You can add any level of properties to the event, but make sure that your analytics visualization tool can understand the schema. For example, if you want to track events in Google Analytics, you'll need to limit the properties to 2 and name them "category" and "label".

**Kelly Crowther** · Answer 2

What I ended up doing was dropping the analytics.js script provided by Segment into index.html. Then in your templates, underneath your imports and outside @Component, expose the analytics variable available in the Segment script by writing in '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");
 }

}

You can declare analytics in any ts file you need to use Segment.

How Can we Integrate Segment Analytics in hybrid ionic app?

There are 2 best solutions below

Related Questions in ANGULAR

Related Questions in IONIC2

Related Questions in HYBRID-MOBILE-APP

Related Questions in SEGMENT-ANALYTICS

Trending Questions

Popular # Hahtags

Popular Questions