@ibm-wch-sdk/ng-pzn

Changes

Class documentation

Concept

1. Your client-side analytics service provides contextual data.
2. Based on that data, your backend abstraction communicates the user profile to your cloud marketing software. The backend abstraction can also receive offers for certain spots on the site, called "interactionpoints".
3. The interactionpoint component in this module asks the backend abstraction for offers for its "interactionpoint".
4. The reveiced offers are rendered by the InteractionpointLayoutComponent component.

Prereqs

• ibm-wch-sdk-ng
• Angular 4.0 or higher (including Angular 5)
• An analytics script extending AbstractAnalyticsService
• A backend abstraction for your marketing software, extending AbstractBackendService

Usage

Install the module

npm install --save ibm-wch-sdk-ng-pzn

@NgModule({
  ...
  imports: [
    ...
    WchNgPznModule
  ],
  ...
})
export class AppModule { }

• Components: InteractionpointLayoutComponent
• Interfaces: PznOffer, PznContext
• Abstract classes: AbstractAnalyticsService, AbstractBackendService
• Injection tokens: ANALYTICS_SERVICE_TOKEN, BACKEND_SERVICE_TOKEN.

Integrate your clientside analytics:

ng generate service your-analytics-service

import { PznContext, AbstractAnalyticsService } from 'ibm-wch-sdk-ng-pzn';
...
@Injectable()
export class YourAnalyticsService extends AbstractAnalyticsService {

    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        /*
        Do some analytics here
        */
        let analyticsResult: Observable<PznContext>;

        // provide the context
        that.onPznContext = analyticsResult;
    }
}

...
import { ANALYTICS_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourAnalyticsService } from './services/your.analytics.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: ANALYTICS_SERVICE_TOKEN, useClass: YourAnalyticsService}
    ],
    ...
})
...

Add your backend abstraction:

ng generate service your-backend-service

...
import { BehaviourSubject } from 'rxjs/BehaviourSubject';
import { PznContext, PznOffer, ANALYTICS_SERVICE_TOKEN, AbstractBackendService } from 'ibm-wch-sdk-ng-pzn';
...

@Injectable()
export class YourBackendService extends AbstractBackendService {
    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        // get the analytics service
        const analytics = aInjector.get(ANALYTICS_SERVICE_TOKEN);

        // implement the session observer, e.g. as BehaviourSubject
        const _session = new BehaviourSubject<PznContext>({});
        that.session = _session;

        // subscribe it to analytics
        analytics.onPznContext.subscribe(that.session);


        /*
        Talk to your marketing software
        */


        // Assign getOffers
        that.getOffers = (interactionpointId) => { /* do something with _session to return the offers*/ };
    }
    ...
}

...
import { BACKEND_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourBackendService } from './services/your.backend.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: BACKEND_SERVICE_TOKEN, useClass: YourBackendService}
    ],
    ...
})
...

Add the content-type

ibm-wch-sdk-cli run:wchtools push -tlm --aggregated

WchNgPznModule classes and interfaces

InteractionpointLayoutComponent component

TypeInteractionpointComponent component

AbstractAnalyticsService abstract class

onPznContext: Observable<PznContext>;

AbstractBackendService abstract class

session: Observer<PznContext>;

refresh: Observer<any>;

getOffers: (id: string) => Observable<PznOffer>;

Interface PznContext

export interface PznContext {
    [key: string]: string;
}

Interface PznOffer

export type PznOffer = {
    'sortOrder': string;
    'display': boolean;
    'rows': string;
    [key: string]: string | boolean;
};

Sample implementation

Demo implementation of AbstractAnalyticsService:

Demo implementation of AbstractBackendService:

Current

Added

• Initial version

Concept

1. Your client-side analytics service provides contextual data.
2. Based on that data, your backend abstraction communicates the user profile to your cloud marketing software. The backend abstraction can also receive offers for certain spots on the site, called "interactionpoints".
3. The interactionpoint component in this module asks the backend abstraction for offers for its "interactionpoint".
4. The reveiced offers are rendered by the InteractionpointLayoutComponent component.

Prereqs

• ibm-wch-sdk-ng
• Angular 4.0 or higher (including Angular 5)
• An analytics script extending AbstractAnalyticsService
• A backend abstraction for your marketing software, extending AbstractBackendService

Usage

Install the module

npm install --save ibm-wch-sdk-ng-pzn

@NgModule({
  ...
  imports: [
    ...
    WchNgPznModule
  ],
  ...
})
export class AppModule { }

• Components: InteractionpointLayoutComponent
• Interfaces: PznOffer, PznContext
• Abstract classes: AbstractAnalyticsService, AbstractBackendService
• Injection tokens: ANALYTICS_SERVICE_TOKEN, BACKEND_SERVICE_TOKEN.

Integrate your clientside analytics:

ng generate service your-analytics-service

import { PznContext, AbstractAnalyticsService } from 'ibm-wch-sdk-ng-pzn';
...
@Injectable()
export class YourAnalyticsService extends AbstractAnalyticsService {

    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        /*
        Do some analytics here
        */
        let analyticsResult: Observable<PznContext>;

        // provide the context
        that.onPznContext = analyticsResult;
    }
}

...
import { ANALYTICS_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourAnalyticsService } from './services/your.analytics.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: ANALYTICS_SERVICE_TOKEN, useClass: YourAnalyticsService}
    ],
    ...
})
...

Add your backend abstraction:

ng generate service your-backend-service

...
import { BehaviourSubject } from 'rxjs/BehaviourSubject';
import { PznContext, PznOffer, ANALYTICS_SERVICE_TOKEN, AbstractBackendService } from 'ibm-wch-sdk-ng-pzn';
...

@Injectable()
export class YourBackendService extends AbstractBackendService {
    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        // get the analytics service
        const analytics = aInjector.get(ANALYTICS_SERVICE_TOKEN);

        // implement the session observer, e.g. as BehaviourSubject
        const _session = new BehaviourSubject<PznContext>({});
        that.session = _session;

        // subscribe it to analytics
        analytics.onPznContext.subscribe(that.session);

        /*
        Talk to your marketing software
        */

        // Assign getOffers
        that.getOffers = (interactionpointId) => { /* do something with _session to return the offers*/ };
    }
    ...
}

...
import { BACKEND_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourBackendService } from './services/your.backend.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: BACKEND_SERVICE_TOKEN, useClass: YourBackendService}
    ],
    ...
})
...

Add the content-type

ibm-wch-sdk-cli run:wchtools push -tlm --aggregated

WchNgPznModule classes and interfaces

InteractionpointLayoutComponent component

TypeInteractionpointComponent component

AbstractAnalyticsService abstract class

onPznContext: Observable<PznContext>;

AbstractBackendService abstract class

session: Observer<PznContext>;

refresh: Observer<any>;

getOffers: (id: string) => Observable<PznOffer>;

Interface PznContext

export interface PznContext {
    [key: string]: string;
}

Interface PznOffer

export type PznOffer = {
    'sortOrder': string;
    'display': boolean;
    'rows': string;
    [key: string]: string \| boolean;
};

Sample implementation

Demo implementation of AbstractAnalyticsService:

Demo implementation of AbstractBackendService:

Index

External modules

• "components/interactionpoint/abstractInteractionpointComponent"
• "components/interactionpoint/typeInteractionpointComponent"
• "index"
• "interfaces/pzn.context"
• "layouts/interactionpoint/interactionpointLayout"
• "module"
• "services/pzn/analytics.service"
• "services/pzn/backend.service"

Index

Classes

• AbstractInteractionpointComponent

Index

Classes

• TypeInteractionpointComponent

Variables

• LOGGER

Variables

<Const> LOGGER

Index

Index

Interfaces

• PznContext

Type aliases

• PznOffer

Type aliases

PznOffer

Type declaration

Index

Classes

• InteractionpointLayoutComponent

Index

Classes

• WchNgPznModule

Index

Classes

• AbstractAnalyticsService

Variables

• ANALYTICSSERVICETOKEN

Variables

<Const> ANALYTICSSERVICETOKEN

Index

Classes

• AbstractBackendService

Variables

• BACKENDSERVICETOKEN

Variables

<Const> BACKENDSERVICETOKEN

npm install --save ibm-wch-sdk-ng-pzn

@NgModule({
  ...
  imports: [
    ...
    WchNgPznModule
  ],
  ...
})
export class AppModule { }

ng generate service your-analytics-service

import { PznContext, AbstractAnalyticsService } from 'ibm-wch-sdk-ng-pzn';
...
@Injectable()
export class YourAnalyticsService extends AbstractAnalyticsService {

    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        /*
        Do some analytics here
        */
        let analyticsResult: Observable<PznContext>;

        // provide the context
        that.onPznContext = analyticsResult;
    }
}

...
import { ANALYTICS_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourAnalyticsService } from './services/your.analytics.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: ANALYTICS_SERVICE_TOKEN, useClass: YourAnalyticsService}
    ],
    ...
})
...

ng generate service your-backend-service

...
import { BehaviourSubject } from 'rxjs/BehaviourSubject';
import { PznContext, PznOffer, ANALYTICS_SERVICE_TOKEN, AbstractBackendService } from 'ibm-wch-sdk-ng-pzn';
...

@Injectable()
export class YourBackendService extends AbstractBackendService {
    constructor(@Inject(Injector) aInjector: Injector) {
        // default
        super();

        // get the analytics service
        const analytics = aInjector.get(ANALYTICS_SERVICE_TOKEN);

        // implement the session observer, e.g. as BehaviourSubject
        const _session = new BehaviourSubject<PznContext>({});
        that.session = _session;

        // subscribe it to analytics
        analytics.onPznContext.subscribe(that.session);

        /*
        Talk to your marketing software
        */

        // Assign getOffers
        that.getOffers = (interactionpointId) => { /* do something with _session to return the offers*/ };
    }
    ...
}

...
import { BACKEND_SERVICE_TOKEN, WchNgPznModule } from 'ibm-wch-sdk-pzn';
import { YourBackendService } from './services/your.backend.service';
...
@NgModule({
    imports: [
        ...
        WchNgPznModule
    ],
    ...
    providers: [
      {provide: BACKEND_SERVICE_TOKEN, useClass: YourBackendService}
    ],
    ...
})
...

ibm-wch-sdk-cli run:wchtools push -tlm --aggregated

TypeInteractionpointComponent component

AbstractAnalyticsService abstract class

onPznContext: Observable<PznContext>;

AbstractBackendService abstract class

session: Observer<PznContext>;

refresh: Observer<any>;

getOffers: (id: string) => Observable<PznOffer>;

Interface PznContext

export interface PznContext {
    [key: string]: string;
}

Interface PznOffer

export type PznOffer = {
    'sortOrder': string;
    'display': boolean;
    'rows': string;
    [key: string]: string \| boolean;
};

Sample implementation

Demo implementation of AbstractAnalyticsService:

Demo implementation of AbstractBackendService:

Index

External modules

• "components/interactionpoint/abstractInteractionpointComponent"
• "components/interactionpoint/typeInteractionpointComponent"
• "index"
• "interfaces/pzn.context"
• "layouts/interactionpoint/interactionpointLayout"
• "module"
• "services/pzn/analytics.service"
• "services/pzn/backend.service"

Hierarchy

Implements

• OnInit
• OnDestroy
• OnChanges
• DoCheck
• AfterContentInit
• AfterContentChecked
• AfterViewInit
• AfterViewChecked
• OnDestroy
• RenderingContextProvider

Index

Constructors

• constructor

Properties

• id
• context
• layoutMode
• name
• onAfterContentChecked
• onAfterContentInit
• onAfterViewChecked
• onAfterViewInit
• onDoCheck
• onLayoutMode
• onName
• onOnChanges
• onOnDestroy
• onOnInit
• onRenderingContext
• renderingContext

Methods

• describeSetter
• ngAfterContentChecked
• ngAfterContentInit
• ngAfterViewChecked
• ngAfterViewInit
• ngDoCheck
• ngOnChanges
• ngOnDestroy
• ngOnInit
• safeSubscribe
• trackByComponentId
• unsubscribeOnDestroy

Constructors

<Protected> constructor

Hierarchy

Implements

• OnInit
• OnDestroy
• OnChanges
• DoCheck
• AfterContentInit
• AfterContentChecked
• AfterViewInit
• AfterViewChecked
• OnDestroy
• RenderingContextProvider

Index

Constructors

• constructor

Properties

• id
• context
• layoutMode
• name
• onAfterContentChecked
• onAfterContentInit
• onAfterViewChecked
• onAfterViewInit
• onDisplay
• onDoCheck
• onLayoutMode
• onName
• onOnChanges
• onOnDestroy
• onOnInit
• onQuery
• onRenderingContext
• renderingContext

Methods

• describeSetter
• ngAfterContentChecked
• ngAfterContentInit
• ngAfterViewChecked
• ngAfterViewInit
• ngDoCheck
• ngOnChanges
• ngOnDestroy
• ngOnInit
• safeSubscribe
• trackByComponentId
• unsubscribeOnDestroy

Constructors

constructor

Hierarchy

Indexable

Index

Hierarchy

Implements

• OnInit
• OnDestroy
• OnChanges
• DoCheck
• AfterContentInit
• AfterContentChecked
• AfterViewInit
• AfterViewChecked
• OnDestroy
• RenderingContextProvider

Index

Constructors

• constructor

Properties

• id
• context
• layoutMode
• name
• onAfterContentChecked
• onAfterContentInit
• onAfterViewChecked
• onAfterViewInit
• onDisplay
• onDoCheck
• onLayoutMode
• onName
• onOnChanges
• onOnDestroy
• onOnInit
• onQuery
• onRenderingContext
• renderingContext

Methods

• describeSetter
• ngAfterContentChecked
• ngAfterContentInit
• ngAfterViewChecked
• ngAfterViewInit
• ngDoCheck
• ngOnChanges
• ngOnDestroy
• ngOnInit
• safeSubscribe
• trackByComponentId
• unsubscribeOnDestroy

Constructors

constructor