Tracking

1. Overview

For tracking, we use the @allianz/tracking library (GitHub repo here), also known as "trackify".

2. Tracking initialization

In order to enable tracking in a TALY-generated journey, it is important to set the tracking environment variables when generating the journey. Those variables are TRACKING_APP_NAME and TRACKING_ADOBE_URL. This will ensure that the tracking is initialized correctly. Check out the environment variables documentation for more details.

2.1. Micro Frontend Setup

If your journey is generated as a module or as a web component and integrated into a Micro Frontend setup, either one of the Micro Frontends or the app shell needs to initialize the tracking.

If your generated journey is responsible for initializing the tracking, you need to set the tracking environment variables as mentioned above.

Otherwise, if e.g. the app shell is the one initializing the tracking as explained in the tracking library docs here, your generated journey will send tracking events based on the initialization provided by the app shell.

3. TALY Automatic Form Tracking

To simplify the setup and reduce manual effort, TALY offers an automatic tracking feature that will fire tracking events for form controls without the need to attach tracking attributes to all of your HTML elements.

The automatic tracking uses the form control value. If you want to fire a different value, please set up the tracking manually. Check out the tracking documentation for more details.

3.1. Usage in TALY Generated Journeys

Building Blocks used in your journey need to override the getForm method. It should already be in place if you generated your Building Block using the TALY building-block generator.

override getForm() {
  return this.form;
}

With that, TALY will automatically track the form controls in your Building Block.

3.2. Usage in Non-TALY Applications

The automatic tracking can be used in any Angular application. However, for applications that are not using TALY, you will need to follow these steps:

1. Install the @allianz/taly-core and @allianz/taly-acl packages to your workspace.
2. Import the InputElementInjectorModule from @allianz/taly-acl/input-element-injector-directive in the module of your component/your standalone component. This will ensure that a corresponding native element can be accessed through a form control. If a native element is found, the tracking is triggered via the blur event. If no native element is available, the statusChanges are used.
3. Call the trackForm() method to bind an automatic tracking to your form group.

import { trackForm } from '@allianz/taly-core/form-tracking';
import { pushEvent } from '@allianz/tracking';
import { AfterViewInit, Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs';

@Component({
  selector: 'simple',
  templateUrl: 'simple.component.html'
})
export class SimpleComponent implements AfterViewInit {
  form = new FormGroup({
    a: new FormControl()
  });

  destroyed = new Subject();

  ngAfterViewInit(): void {
    trackForm(this.form, 'simple-component', this.destroyed, pushEvent);
  }
}