Product experience directive

A directive that lets you easiliy integrate product experience tracking in your code. It can be applied to any component or HTML element and trigger events when those elements are clicked. Or you can implement more complex scenarios in your re-usable and/or business layer components by using the features of a ProductExperienceEventSource.

Usage examples

Simple HTML elements

When applied to HTML elements or components that do not implement any specific behavior as product experience source (see below), the directive will emit a product experience event whenever a click is executed on the element or bubbles up to that element/component. You must provide an action name and can optinally provide any object as action data:

<button
  title="Save"
  type="submit"
  c8yProductExperience
  [actionName]="'editWidget'"
  [actionData]="{ widgetName: widget.id }"
>
  Save
</button>

Components implmenting ProductExperienceEventSource

In situations where you want your component to emit product experince events on other triggers that the click event, to emit events on multiple triggers or to add additional context data to its events, you can implement the ProductExperienceEventSource interface:

@Component({
  selector: 'c8y-stepper',
  templateUrl: './stepper.component.html',
  providers: [
    { provide: PRODUCT_EXPERIENCE_EVENT_SOURCE, useExisting: forwardRef(() => C8yStepper) }
  ]
})
export class C8yStepper implements ProductExperienceEventSource {
  productExperienceEvent: ProductExperienceEvent;
}

When the c8yProductExperince directive is applied to components implementing ProductExperienceEventSource its default behavior of emiting product experince event on click is supressed. Instead you can control when such an event will be triggered:

onNext() {
  this.triggerEvent('clickNextBtn');
}

private triggerEvent(action: string): void {
// you can add any additional context data to your events...
const eventData = {
    ...this.productExperienceEvent?.data,
    action,
    step: this.step.label
};
// ...provide a default action name...
const eventName = this.productExperienceEvent?.eventName || 'anyDefaultEventName';
// ... and then send the event to the PX platform.
this.gainsightService.triggerEvent(eventName, eventData);
}

Inheriting data

When implementing more complex business or other re-usable components you may use other components implementing ProductExperienceEventSource. To let you pass your event data down the path more easily, c8yProductExperience supports inheriting data passed from parent components:

@Component({
  selector: 'save-btn',
  template: `
    <button
      title="Save"
      type="submit"
      c8yProductExperience
      inherit
      [actionData]="{ action: 'Save' }"
    >
      Save
    </button>
  `,
  providers: [
    { provide: PRODUCT_EXPERIENCE_EVENT_SOURCE, useExisting: forwardRef(() => C8yStepper) }
  ]
})
export class SaveBtnComponent implements ProductExperienceEventSource {
  productExperienceEvent: ProductExperienceEvent;
}

In the above example, the SaveBtnComponent uses the c8yProductExperience directive in its template. Instead of providng an action name it uses the inherit option so that the product experience event from the button element will use the action name passed to save-btn. Moreover, the event from the button element will extend all data provided higher in the component tree by the action property.