@jobcloud/mkp-ab-testing

AbTesting

This library was generated with Angular CLI version 15.1.0.

Features

• Set up an A/B test with a simple and descriptive code (the module makes available just one simple structural directive)
• A/B tests are valid across different pages, using cookies with the expiration (default 45 days)
• Test multiple versions with changes as complicated as you need, while still keeping the code clean and understandable
• Effortlessly set up any number of independent A/B tests, being sure that they won't clash in the code

Usage in short

npm i @jobcloud/mkp-ab-testing --save

Set up an A/B test including the module with forRoot method:

import { AbTrackingService, provideAbTesting, AbTestVariationDirective} from 'abTesting';

const config = [
  {
    experiment_variants: [ 'a', 'b' ],
    experiment_name: 'test_dashboard'
  },
  {
    experiment_variants: [ 'a', 'b', 'c' ],
    experiment_name: 'test_ecommerce',
  },
  {
    experiment_variants: [ 'a', 'b', 'c' ],
    experiment_name: 'test_products',
  },
]

@NgModule({
  //...
  imports : [
    AbTestVariationDirective
  ],
  providers: [
    provideAbTesting(config),
    // Optional if you have some Output Event
    { provide: AbTrackingService, useClass : AppTrackingService }
  ],
  //...
})

Documentation 1: Initializing

AngularAbTests declares just one directive called *abTestVariation. The directive is structural and it's used to wrap parts of the HTML that you want to A/B test.

In order to use this directive, you need to import standAlone directive and provider wherever you need it.

@NgModule({
  //...
  imports : [
    AbTestVariationDirective
  ],
  providers: [
    provideAbTesting(config),
    // Optional if you have some Output Event
    { provide: AbTrackingService, useClass : AppTrackingService }
  ],
  //...
})
export class AppModule {}

Wrap fragments of HTML inside the structural directive named abTestVariation, marking them to belong to one or more of the versions of your A/B test.

<ng-container *abTestVariation="'test_products'; experiment_variant:'a' ">
  <div class="block test_a3">Test A TEST PRODUCTS</div>
</ng-container>

<ng-container *abTestVariation="'test_products'; experiment_variant:'b' ">
  <app-test></app-test>
</ng-container>