From f1f68ed2f3c95c12c3ada823c8864daa7ca31092 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 22 Oct 2024 10:18:29 +0300 Subject: [PATCH 01/14] remove duplicate changelog entry --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e65388658f..8f8b41ce68 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -64,7 +64,6 @@ Our versioning strategy is as follows: * `[sitecore-jss]` GenericFieldValue model is updated to accept Date type ([#1916](https://github.com/Sitecore/jss/pull/1916)) * `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/healthz endpoint ([#1928](https://github.com/Sitecore/jss/pull/1928)) * `[sitecore-jss]` `[sitecore-jss-angular]` Render field metdata chromes in editMode metadata - in edit mode metadata in Pages, angular package field directives will render wrapping `code` elements with field metadata required for editing; ([#1926](https://github.com/Sitecore/jss/pull/1926)) -* `[sitecore-jss-nextjs]` Expose MiddlewareBase class and MiddlewareBaseConfig type ([#1941](https://github.com/Sitecore/jss/pull/1941)) * `[angular-xmcloud]``[sitecore-jss-angular]` Analytics and CloudSDK integration * `[angular-xmcloud]` Add CloudSDK initialization on client side ([#1952](https://github.com/Sitecore/jss/pull/1952)) From 4426395e4c27e254215837332f3240ccda68044d Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 22 Oct 2024 17:49:04 +0300 Subject: [PATCH 02/14] add cdp page view component to send page view events --- .../src/templates/angular-xmcloud/.env | 7 ++ .../scripts/cdp-page-view.component.ts | 76 +++++++++++++++++++ .../scripts/cloud-sdk-init.component.ts | 6 +- .../routing/scripts/scripts.component.html | 1 + .../src/app/routing/scripts/scripts.module.ts | 3 +- .../sitecore-jss-angular/src/public_api.ts | 2 + 6 files changed, 91 insertions(+), 4 deletions(-) create mode 100644 packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env b/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env index d76ee32482..10e94d0689 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env @@ -12,3 +12,10 @@ PROXY_HOST=http://localhost:3000 # Your XM Cloud Proxy server path is needed to build the app. The build output will be copied to the proxy server path. PROXY_BUILD_PATH=<%- locals.relativeProxyAppDestination.replace(/\\/g, '\\\\') %>dist + +# ============================================== + +# An optional Sitecore Personalize scope identifier. +# This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant. +# This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment. +ANGULAR_PUBLIC_PERSONALIZE_SCOPE= diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts new file mode 100644 index 0000000000..a55a8f24e2 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts @@ -0,0 +1,76 @@ +import { Component, OnInit } from '@angular/core'; +import { isServer, CdpHelper } from '@sitecore-jss/sitecore-jss-angular'; +import { JssContextService } from '../../jss-context.service'; +import { JssState } from '../../JssState'; +import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-angular'; +import { Subscription } from 'rxjs'; +import { pageView, PageViewData } from '@sitecore-cloudsdk/events/browser'; + +/** + * 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 { + 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; + + 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.ANGULAR_PUBLIC_PERSONALIZE_SCOPE; + const pageVariantId = CdpHelper.getPageVariantId( + route.itemId, + language, + variantId as string, + scope + ); + + const pageViewData: PageViewData = { + channel: 'WEB', + currency: 'USD', + page: route.name, + pageVariantId, + language, + }; + + pageView(pageViewData); + }); + } + } + + 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 in development mode + */ + disabled = () => { + return false; + }; +} diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts index 8a99ae3c06..29bf6a3e35 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts @@ -15,7 +15,7 @@ export class CloudSdkInitComponent implements OnInit { constructor() {} ngOnInit(): void { - if (!isServer) { + if (!isServer()) { CloudSDK({ siteName: environment.sitecoreSiteName, sitecoreEdgeUrl: environment.sitecoreEdgeUrl, @@ -25,8 +25,8 @@ export class CloudSdkInitComponent implements OnInit { // Cookie may be created in personalize middleware (server), but if not we should create it here enableBrowserCookie: true, }) - .addEvents() - .initialize(); + .addEvents() + .initialize(); } } } diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html index c39b8b6e85..caed1a4cf6 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html @@ -1,4 +1,5 @@ + diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts index 1b25306864..26d09c93c1 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts @@ -2,10 +2,11 @@ import { NgModule } from '@angular/core'; import { ScriptsComponent } from './scripts.component'; import { JssModule } from '@sitecore-jss/sitecore-jss-angular'; import { CloudSdkInitComponent } from './cloud-sdk-init.component'; +import { CdpPageViewComponent } from './cdp-page-view.component'; @NgModule({ exports: [ScriptsComponent], imports: [JssModule], - declarations: [ScriptsComponent, CloudSdkInitComponent], + declarations: [ScriptsComponent, CloudSdkInitComponent, CdpPageViewComponent], }) export class ScriptsModule {} diff --git a/packages/sitecore-jss-angular/src/public_api.ts b/packages/sitecore-jss-angular/src/public_api.ts index 83f97bc168..7560c0e60f 100644 --- a/packages/sitecore-jss-angular/src/public_api.ts +++ b/packages/sitecore-jss-angular/src/public_api.ts @@ -48,6 +48,7 @@ export { LayoutService, LayoutServiceData, LayoutServiceContextData, + LayoutServicePageState, GraphQLLayoutService, RestLayoutService, PlaceholdersData, @@ -101,3 +102,4 @@ export { EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking'; +export { CdpHelper } from '@sitecore-jss/sitecore-jss/personalize'; From c03ae789498c7812f65b2293f347ab7d32eeebd2 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 23 Oct 2024 11:33:37 +0300 Subject: [PATCH 03/14] minor update of imports --- .../src/app/routing/scripts/cdp-page-view.component.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts index a55a8f24e2..7a5fa42c0e 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts @@ -1,10 +1,9 @@ import { Component, OnInit } from '@angular/core'; -import { isServer, CdpHelper } from '@sitecore-jss/sitecore-jss-angular'; -import { JssContextService } from '../../jss-context.service'; -import { JssState } from '../../JssState'; -import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-angular'; 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'; /** * This is the CDP page view component. From f691b4583e5b78b485488d1f90e2de1d5999a6cc Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 23 Oct 2024 11:43:53 +0300 Subject: [PATCH 04/14] update changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f8b41ce68..04affd3298 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -65,7 +65,8 @@ Our versioning strategy is as follows: * `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/healthz endpoint ([#1928](https://github.com/Sitecore/jss/pull/1928)) * `[sitecore-jss]` `[sitecore-jss-angular]` Render field metdata chromes in editMode metadata - in edit mode metadata in Pages, angular package field directives will render wrapping `code` elements with field metadata required for editing; ([#1926](https://github.com/Sitecore/jss/pull/1926)) * `[angular-xmcloud]``[sitecore-jss-angular]` Analytics and CloudSDK integration -* `[angular-xmcloud]` Add CloudSDK initialization on client side ([#1952](https://github.com/Sitecore/jss/pull/1952)) + * `[angular-xmcloud]` Add CloudSDK initialization on client side ([#1952](https://github.com/Sitecore/jss/pull/1952)) + * `[angular-xmcloud]``[sitecore-jss-angular]` Add CDP page view component to angular xmc app and add it to the app's scripts section. ([#1957](https://github.com/Sitecore/jss/pull/1957)) ### 🛠 Breaking Change From ad2d40fb888178970531e9ce2b02058324d8ff1f Mon Sep 17 00:00:00 2001 From: yavorsk Date: Thu, 24 Oct 2024 20:55:12 +0300 Subject: [PATCH 05/14] some fixes - handle empty language, handle send event error; --- .../src/app/routing/scripts/cdp-page-view.component.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts index 7a5fa42c0e..08ab20d871 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts @@ -1,9 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +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. @@ -15,7 +16,7 @@ import { JssState } from '../../JssState'; selector: 'app-cdp-page-view', template: '', }) -export class CdpPageViewComponent implements OnInit { +export class CdpPageViewComponent implements OnInit, OnDestroy { private contextSubscription: Subscription; constructor(private jssContext: JssContextService) {} @@ -40,7 +41,7 @@ export class CdpPageViewComponent implements OnInit { const scope = process.env.ANGULAR_PUBLIC_PERSONALIZE_SCOPE; const pageVariantId = CdpHelper.getPageVariantId( route.itemId, - language, + language || environment.defaultLanguage, variantId as string, scope ); @@ -53,7 +54,7 @@ export class CdpPageViewComponent implements OnInit { language, }; - pageView(pageViewData); + pageView(pageViewData).catch((err) => console.debug(err)); }); } } From 0bd1ec0586a3eda524e42c2278b9eb46463a7294 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Thu, 24 Oct 2024 21:02:24 +0300 Subject: [PATCH 06/14] do not initialize csdk and send events if not in production mode --- .../src/app/routing/scripts/cdp-page-view.component.ts | 4 ++-- .../src/app/routing/scripts/cloud-sdk-init.component.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts index 08ab20d871..1b5e6ba186 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts @@ -68,9 +68,9 @@ export class CdpPageViewComponent implements OnInit, OnDestroy { /** * 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 in development mode + * By default it is disabled if not in production mode */ disabled = () => { - return false; + return !environment.production; }; } diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts index 29bf6a3e35..9801861595 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts @@ -15,7 +15,7 @@ export class CloudSdkInitComponent implements OnInit { constructor() {} ngOnInit(): void { - if (!isServer()) { + if (!isServer() && environment.production) { CloudSDK({ siteName: environment.sitecoreSiteName, sitecoreEdgeUrl: environment.sitecoreEdgeUrl, From 1b3ed4848405aae3210bdf01d9c3855377ebcbd6 Mon Sep 17 00:00:00 2001 From: Yavor Krastev <4502045+yavorsk@users.noreply.github.com> Date: Thu, 24 Oct 2024 21:32:10 +0300 Subject: [PATCH 07/14] add comment Co-authored-by: Illia Kovalenko <23364749+illiakovalenko@users.noreply.github.com> --- .../src/app/routing/scripts/cdp-page-view.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts index 1b5e6ba186..895f906aa9 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts @@ -28,7 +28,7 @@ export class CdpPageViewComponent implements OnInit, OnDestroy { 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; } From 08072646335ad91e794d155bf76d73ab688ac647 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Thu, 24 Oct 2024 21:34:26 +0300 Subject: [PATCH 08/14] fix comment intendation --- .../src/app/routing/scripts/cdp-page-view.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts index 895f906aa9..e1bf2dceed 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts @@ -28,7 +28,8 @@ export class CdpPageViewComponent implements OnInit, OnDestroy { route, context: { pageState, language, variantId }, } = newState.sitecore; -// Do not create events in editing or preview mode or if missing route data + + // Do not create events in editing or preview mode or if missing route data if (pageState !== LayoutServicePageState.Normal || !route?.itemId) { return; } From 0eea61c6495a2c743518876c7e4bed3a9a4fe2c9 Mon Sep 17 00:00:00 2001 From: Yavor Krastev <4502045+yavorsk@users.noreply.github.com> Date: Fri, 25 Oct 2024 14:07:42 +0300 Subject: [PATCH 09/14] minor update of changelog entry Co-authored-by: Illia Kovalenko <23364749+illiakovalenko@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04affd3298..6040177654 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -66,7 +66,7 @@ Our versioning strategy is as follows: * `[sitecore-jss]` `[sitecore-jss-angular]` Render field metdata chromes in editMode metadata - in edit mode metadata in Pages, angular package field directives will render wrapping `code` elements with field metadata required for editing; ([#1926](https://github.com/Sitecore/jss/pull/1926)) * `[angular-xmcloud]``[sitecore-jss-angular]` Analytics and CloudSDK integration * `[angular-xmcloud]` Add CloudSDK initialization on client side ([#1952](https://github.com/Sitecore/jss/pull/1952)) - * `[angular-xmcloud]``[sitecore-jss-angular]` Add CDP page view component to angular xmc app and add it to the app's scripts section. ([#1957](https://github.com/Sitecore/jss/pull/1957)) + * `[angular-xmcloud]``[sitecore-jss-angular]` Add CDP Page View component to Angular XM Cloud add-on ([#1957](https://github.com/Sitecore/jss/pull/1957)) ### 🛠 Breaking Change From e5e4fc42c55fb6b487ccefb832cba838fd926758 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 25 Oct 2024 14:09:19 +0300 Subject: [PATCH 10/14] rename personalize scop environment variable --- packages/create-sitecore-jss/src/templates/angular-xmcloud/.env | 2 +- .../src/app/routing/scripts/cdp-page-view.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env b/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env index 10e94d0689..589b9fb76e 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env @@ -18,4 +18,4 @@ PROXY_BUILD_PATH=<%- locals.relativeProxyAppDestination.replace(/\\/g, '\\\\') % # An optional Sitecore Personalize scope identifier. # This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant. # This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment. -ANGULAR_PUBLIC_PERSONALIZE_SCOPE= +PUBLIC_PERSONALIZE_SCOPE= diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts index e1bf2dceed..9e9386f83c 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts @@ -39,7 +39,7 @@ export class CdpPageViewComponent implements OnInit, OnDestroy { return; } - const scope = process.env.ANGULAR_PUBLIC_PERSONALIZE_SCOPE; + const scope = process.env.PUBLIC_PERSONALIZE_SCOPE; const pageVariantId = CdpHelper.getPageVariantId( route.itemId, language || environment.defaultLanguage, From 86bd63dc27377b438cec3c637deabf426990bbf8 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 25 Oct 2024 18:13:54 +0300 Subject: [PATCH 11/14] add migration guide entry for page view tracking --- docs/upgrades/unreleased.md | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index ee86877c1d..1c68c10941 100644 --- a/docs/upgrades/unreleased.md +++ b/docs/upgrades/unreleased.md @@ -293,7 +293,41 @@ If you plan to use the Angular SDK with XMCloud, you will need to perform next s ], ``` +* In order to be able to track Page View events in XMCloud you have to add a component that executes the page view event and render it in the scripts section; in XMCloud client side event tracking is done via CloudSDK so you need to make sure that it is initialized before firing any tracked event. + * see example code below; for more details take a look at the OOTB cdp-page-view.component.ts + + ```ts + import { JssContextService } from '../../jss-context.service'; + import { JssState } from '../../JssState'; + import { pageView, PageViewData } from '@sitecore-cloudsdk/events/browser'; + ... + ngOnInit(): void { + if (!isServer()) { + this.contextSubscription = this.jssContext.state.subscribe((newState: JssState) => { + ... + // prepare the required data + ... + + const pageViewData: PageViewData = { + channel: 'WEB', + currency: 'USD', + page: route.name, + pageVariantId, + language, + }; + + pageView(pageViewData).catch((err) => console.debug(err)); + }); + } + } + ``` + * add the component to the scripts section after the CloudSdk initialize component: + + ```html + + + ``` # @sitecore-jss/sitecore-jss-proxy From 9daabd1cf41c50f4f83a1c6feaf65e024eb495d5 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 29 Oct 2024 13:14:29 +0200 Subject: [PATCH 12/14] add migrate guide for cloud sdk init --- docs/upgrades/unreleased.md | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index 1c68c10941..1ba6496bf1 100644 --- a/docs/upgrades/unreleased.md +++ b/docs/upgrades/unreleased.md @@ -293,6 +293,34 @@ If you plan to use the Angular SDK with XMCloud, you will need to perform next s ], ``` +* In XMCloud client side event tracking is done via CloudSDK so you need to make sure that it is initialized before send any event. See the following example of a component that does that; note that it should be added to the scripts.component.html before any other scripts that uses it; for more details take a look at the OOTB cloud-sdk-init.component.ts: + ```ts + import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; + import '@sitecore-cloudsdk/events/browser'; + import { environment } from '../../../environments/environment'; + import { isServer } from '@sitecore-jss/sitecore-jss-angular'; + ... + ngOnInit(): void { + if (!isServer() && environment.production) { + CloudSDK({ + siteName: environment.sitecoreSiteName, + sitecoreEdgeUrl: environment.sitecoreEdgeUrl, + sitecoreEdgeContextId: environment.sitecoreEdgeContextId, + cookieDomain: window.location.hostname.replace(/^www\./, ''), + enableBrowserCookie: true, + }) + .addEvents() + .initialize(); + } + } + ``` + + * scripts.component.html: + + ```html + + ``` + * In order to be able to track Page View events in XMCloud you have to add a component that executes the page view event and render it in the scripts section; in XMCloud client side event tracking is done via CloudSDK so you need to make sure that it is initialized before firing any tracked event. * see example code below; for more details take a look at the OOTB cdp-page-view.component.ts @@ -322,7 +350,7 @@ If you plan to use the Angular SDK with XMCloud, you will need to perform next s } ``` - * add the component to the scripts section after the CloudSdk initialize component: + * add the component to the scripts.component.html after the CloudSdk initialize component: ```html From d6cb0f586a865535bd913d6d1ea3665f61dd2559 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 29 Oct 2024 13:15:16 +0200 Subject: [PATCH 13/14] update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bee4a132fa..582ba0a68f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -72,7 +72,7 @@ Our versioning strategy is as follows: * `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/healthz endpoint ([#1928](https://github.com/Sitecore/jss/pull/1928)) * `[sitecore-jss]` `[sitecore-jss-angular]` Render field metdata chromes in editMode metadata - in edit mode metadata in Pages, angular package field directives will render wrapping `code` elements with field metadata required for editing; ([#1926](https://github.com/Sitecore/jss/pull/1926)) * `[angular-xmcloud]``[sitecore-jss-angular]` Analytics and CloudSDK integration - * `[angular-xmcloud]` Add CloudSDK initialization on client side ([#1952](https://github.com/Sitecore/jss/pull/1952)) + * `[angular-xmcloud]` Add CloudSDK initialization on client side ([#1952](https://github.com/Sitecore/jss/pull/1952))([#1957](https://github.com/Sitecore/jss/pull/1957)) * `[angular-xmcloud]``[sitecore-jss-angular]` Add CDP Page View component to Angular XM Cloud add-on ([#1957](https://github.com/Sitecore/jss/pull/1957)) From c6a7f7b1adb2c2ea7eee7342a8039f694ac4567d Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 29 Oct 2024 14:06:57 +0200 Subject: [PATCH 14/14] remove 'public' prefix of the personalize scope env variable --- packages/create-sitecore-jss/src/templates/angular-xmcloud/.env | 2 +- .../src/app/routing/scripts/cdp-page-view.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env b/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env index 589b9fb76e..6be3add8eb 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/.env @@ -18,4 +18,4 @@ PROXY_BUILD_PATH=<%- locals.relativeProxyAppDestination.replace(/\\/g, '\\\\') % # An optional Sitecore Personalize scope identifier. # This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant. # This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment. -PUBLIC_PERSONALIZE_SCOPE= +PERSONALIZE_SCOPE= diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts index 9e9386f83c..b30a270559 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cdp-page-view.component.ts @@ -39,7 +39,7 @@ export class CdpPageViewComponent implements OnInit, OnDestroy { return; } - const scope = process.env.PUBLIC_PERSONALIZE_SCOPE; + const scope = process.env.PERSONALIZE_SCOPE; const pageVariantId = CdpHelper.getPageVariantId( route.itemId, language || environment.defaultLanguage,