-
Notifications
You must be signed in to change notification settings - Fork 276
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[angular][xmcloud] CDP page view component (#1957)
* remove duplicate changelog entry * add cdp page view component to send page view events * minor update of imports * update changelog * some fixes - handle empty language, handle send event error; * do not initialize csdk and send events if not in production mode * add comment Co-authored-by: Illia Kovalenko <[email protected]> * fix comment intendation * minor update of changelog entry Co-authored-by: Illia Kovalenko <[email protected]> * rename personalize scop environment variable * add migration guide entry for page view tracking * add migrate guide for cloud sdk init * update changelog * remove 'public' prefix of the personalize scope env variable --------- Co-authored-by: Illia Kovalenko <[email protected]>
- Loading branch information
1 parent
0c5ee0c
commit 892e6d1
Showing
8 changed files
with
156 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
...core-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import { Component, OnInit, OnDestroy } from '@angular/core'; | ||
import { Subscription } from 'rxjs'; | ||
import { isServer, CdpHelper, LayoutServicePageState } from '@sitecore-jss/sitecore-jss-angular'; | ||
import { pageView, PageViewData } from '@sitecore-cloudsdk/events/browser'; | ||
import { JssContextService } from '../../jss-context.service'; | ||
import { JssState } from '../../JssState'; | ||
import { environment } from '../../../environments/environment'; | ||
|
||
/** | ||
* This is the CDP page view component. | ||
* It uses the Sitecore Cloud SDK to enable page view events on the client-side. | ||
* See Sitecore Cloud SDK documentation for details. | ||
* https://www.npmjs.com/package/@sitecore-cloudsdk/events | ||
*/ | ||
@Component({ | ||
selector: 'app-cdp-page-view', | ||
template: '', | ||
}) | ||
export class CdpPageViewComponent implements OnInit, OnDestroy { | ||
private contextSubscription: Subscription; | ||
|
||
constructor(private jssContext: JssContextService) {} | ||
|
||
ngOnInit(): void { | ||
if (!isServer()) { | ||
this.contextSubscription = this.jssContext.state.subscribe((newState: JssState) => { | ||
const { | ||
route, | ||
context: { pageState, language, variantId }, | ||
} = newState.sitecore; | ||
|
||
// Do not create events in editing or preview mode or if missing route data | ||
if (pageState !== LayoutServicePageState.Normal || !route?.itemId) { | ||
return; | ||
} | ||
|
||
// Do not create events if disabled (e.g. we don't have consent) | ||
if (this.disabled()) { | ||
return; | ||
} | ||
|
||
const scope = process.env.PERSONALIZE_SCOPE; | ||
const pageVariantId = CdpHelper.getPageVariantId( | ||
route.itemId, | ||
language || environment.defaultLanguage, | ||
variantId as string, | ||
scope | ||
); | ||
|
||
const pageViewData: PageViewData = { | ||
channel: 'WEB', | ||
currency: 'USD', | ||
page: route.name, | ||
pageVariantId, | ||
language, | ||
}; | ||
|
||
pageView(pageViewData).catch((err) => console.debug(err)); | ||
}); | ||
} | ||
} | ||
|
||
ngOnDestroy() { | ||
if (this.contextSubscription) { | ||
this.contextSubscription.unsubscribe(); | ||
} | ||
} | ||
|
||
/** | ||
* Determines if the page view events should be turned off. | ||
* IMPORTANT: You should implement based on your cookie consent management solution of choice. | ||
* By default it is disabled if not in production mode | ||
*/ | ||
disabled = () => { | ||
return !environment.production; | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
...sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
<ng-container> | ||
<sc-editing-scripts></sc-editing-scripts> | ||
<app-cloud-sdk-init></app-cloud-sdk-init> | ||
<app-cdp-page-view></app-cdp-page-view> | ||
</ng-container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters