Rokt Angular Web SDK Integration

Installation

npm install --save @rokt/ng-web-sdk
# yarn add @rokt/ng-web-sdk

Root Modules

In the project's root module add the forRoot() to the listed imports. Place your partner tag id in the configuration options.

// ...
import { RoktLauncherModule } from '@rokt/ng-web-sdk';

@NgModule({
  // ...
  imports: [
    // ...
    RoktLauncherModule.forRoot({
      tagId: '<your_tag_id>',
    }),
  ], 
})
export class AppModule { }

Children Modules

If the project has children modules, add the forChild() to the listed imports:

// ...
import { RoktLauncherModule } from '@rokt/ng-web-sdk';

@NgModule({
  // ...
  imports: [
    // ...
    RoktLauncherModule.forChild()
  ], 
})
export class AppChildModule { }

Offer Page

On the page/route that must display a Rokt offer

// ...
import { RoktLauncherService, Rokt } from '@rokt/ng-web-sdk';

@Component({
  selector: 'app-confirmation-page',
  template: /* html */`
    <div>Congratulations on your purchase!</div>
    <div id="rokt-placeholder"></div>
  `,
})
export class ConfirmationPageComponent {
  private _selection: Rokt.Selection

  constructor(
    private roktLauncherService: RoktLauncherService
  ) {}

  async ngAfterViewInit() {
    // Create a selection for this page, passing in relevant attributes. The method
    // will return a selection object that contains the placements for this page
    this._selection = await this.roktLauncherService.selectPlacements({
      attributes: {}
    })
    
    // Append the placements to the current page
    await this._selection.placements.placeAll()
  }

  async ngOnDestroy() {
    // Clear the placements from the current page, triggering a clean up of listeners
    // within the Rokt Web SDK singleton
    await this._selection.placements.removeAll()
  }
}