Tracking Library

This library was developed to fulfill the need to use the Google Tag Manager system as an standalone service. This library is divided in two parts:

• Data Layer: this service is mainly in charge of loading Google Tag Manager and One Link Smart scripts, besides having other purposes.
• Tracking: this service is in charge of tracking any information sent from the funnels to Google Tag Manager in order to reach Amplitude.

How to use

Once the package is installed you can now use the library.

For the Datalayer service:

1. Import the Datalayer service into the main module.

import { DataLayerService } from "@kavak/tracking";

2. Add the service(s) into the module providers.

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    DataLayerService
  ],
  bootstrap: [AppComponent],
})

3. You must create an initConfig object and provide it so the service works.

const initConfig = {
  gtmId: '', // the Google Tag Manager id to add the corresponding script
  optimizeId: '', // the Optimize id to add the corresponding script (optional)
  addOneLinkSmart: true, // whether the project has to add the One Link Smart script (optional, default to false)
  leadScoreUrl: '', // the URL to consult leadScore (optional)
  trackOnLightHouse: false // whether the project has to add the Google Tag Manager script when the platform is Lighthouse (optional, default to false)
};

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    DataLayerService,
    { provide: 'initConfig', useValue: initConfig },
  ],
  bootstrap: [AppComponent],
})

4. Call the function setup() inside the constructor.

export class AppModule {
  constructor(private dataLayer: DataLayerService) {
    this.dataLayer.setup();
  }
}

For the Tracking service:

1. Import the Tracking service into the component.

import { TrackingService } from "@kavak/tracking";

2. Add the service on the component constructor.

constructor(private readonly tracking: TrackingService) {}

3. Call the function trackToAmplitude inside the function that carries the values that are going to be tracked.

sampleFunction() {
  this.tracking.trackToAmplitude({ event: 'event', data: '' });
}

The only parameter in the function trackToAmplitude is dataToTrack and it represents the data that is going to be pushed to the data layer. You should put here all the data (with the right structure) that you need to send to Amplitude, since there is no more implementation in the Tracking library.

Tracking Library

This library was developed to fulfill the need to use the Google Tag Manager system as an standalone service. This library is divided in two parts:

• Data Layer: this service is mainly in charge of loading Google Tag Manager and One Link Smart scripts, besides having other purposes.
• Tracking: this service is in charge of tracking any information sent from the funnels to Google Tag Manager in order to reach Amplitude.

How to use

Once the package is installed you can now use the library.

For the Datalayer service:

1. Import the Datalayer service into the main module.

import { DataLayerService } from "@kavak/tracking";

2. Add the service(s) into the module providers.

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    DataLayerService
  ],
  bootstrap: [AppComponent],
})

3. You must create an initConfig object and provide it so the service works.

const initConfig = {
  gtmId: '', // the Google Tag Manager id to add the corresponding script
  optimizeId: '', // the Optimize id to add the corresponding script (optional)
  addOneLinkSmart: true, // whether the project has to add the One Link Smart script (optional, default to false)
  leadScoreUrl: '', // the URL to consult leadScore (optional)
  trackOnLightHouse: false // whether the project has to add the Google Tag Manager script when the platform is Lighthouse (optional, default to false)
};

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    DataLayerService,
    { provide: 'initConfig', useValue: initConfig },
  ],
  bootstrap: [AppComponent],
})

4. Call the function setup() inside the constructor.

export class AppModule {
  constructor(private dataLayer: DataLayerService) {
    this.dataLayer.setup();
  }
}

For the Tracking service:

1. Import the Tracking service into the component.

import { TrackingService } from "@kavak/tracking";

2. Add the service on the component constructor.

constructor(private readonly tracking: TrackingService) {}

3. Call the function trackToAmplitude inside the function that carries the values that are going to be tracked.

sampleFunction() {
  this.tracking.trackToAmplitude({ event: 'event', data: '' });
}

The only parameter in the function trackToAmplitude is dataToTrack and it represents the data that is going to be pushed to the data layer. You should put here all the data (with the right structure) that you need to send to Amplitude, since there is no more implementation in the Tracking library.