From f295d7f4bddfe08564f3f77d74cc02e8bc8f6b89 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Wed, 16 Oct 2024 18:57:39 -0400 Subject: [PATCH 1/4] [angular][xmcloud] Init CloudSDK on browser --- .../scripts/cloud-sdk-init.component.ts | 30 +++++++++++++++++++ .../routing/scripts/scripts.component.html | 1 + .../src/app/routing/scripts/scripts.module.ts | 3 +- .../src/templates/nextjs-xmcloud/package.json | 3 +- 4 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts 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 new file mode 100644 index 0000000000..a1a9dca5f1 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts @@ -0,0 +1,30 @@ +import { Component, OnInit } from '@angular/core'; +import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; +import { environment } from '../../../environments/environment'; +import { isServer } from '@sitecore-jss/sitecore-jss/utils'; + +/** + * Component that renders editing scripts and client data for the current page in Sitecore Editor. + * Only renders scripts when Metadata mode is used. + */ +@Component({ + selector: 'app-cloudsdk-init', + template: '', +}) +export class CloudSdkInitComponent implements OnInit { + constructor() {} + + ngOnInit(): void { + if (!isServer) { + CloudSDK({ + siteName: environment.sitecoreSiteName, + sitecoreEdgeUrl: environment.sitecoreEdgeUrl, + sitecoreEdgeContextId: environment.sitecoreEdgeContextId, + // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com" + cookieDomain: window.location.hostname.replace(/^www\./, ''), + // Cookie may be created in personalize middleware (server), but if not we should create it here + enableBrowserCookie: true, + }).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 b1dce244b8..0d617e217b 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,3 +1,4 @@ + 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 0680d729fb..1b25306864 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 @@ -1,10 +1,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'; @NgModule({ exports: [ScriptsComponent], imports: [JssModule], - declarations: [ScriptsComponent], + declarations: [ScriptsComponent, CloudSdkInitComponent], }) export class ScriptsModule {} diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json index c2d7a5e3aa..2df3d6d985 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json @@ -1,7 +1,8 @@ { "dependencies": { "@sitecore/components": "^1.1.10", - "@sitecore-cloudsdk/events": "^0.3.1", + "@sitecore-cloudsdk/core": "^0.4.0-rc.0", + "@sitecore-cloudsdk/events": "^0.4.0-rc.0", "@sitecore-feaas/clientside": "^0.5.17" } } From 7f22a526cab8f36fba11ebbc85c9d2e02d769a05 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Thu, 17 Oct 2024 08:58:33 -0400 Subject: [PATCH 2/4] PR followup --- CHANGELOG.md | 2 ++ .../src/app/routing/scripts/cloud-sdk-init.component.ts | 5 ++--- .../src/app/routing/scripts/scripts.component.html | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 80f42a6d05..1bdec4c376 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -68,6 +68,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)) * `[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)) ### 🛠 Breaking Change 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 a1a9dca5f1..04625baa6d 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 @@ -4,11 +4,10 @@ import { environment } from '../../../environments/environment'; import { isServer } from '@sitecore-jss/sitecore-jss/utils'; /** - * Component that renders editing scripts and client data for the current page in Sitecore Editor. - * Only renders scripts when Metadata mode is used. + * Component to init CloudSDK logic - to allow events throughout the site */ @Component({ - selector: 'app-cloudsdk-init', + selector: 'app-cloud-sdk-init', template: '', }) export class CloudSdkInitComponent implements OnInit { 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 0d617e217b..c39b8b6e85 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,4 @@ - + From eb3457a388b42667a8da6cbcfcc1a2afafc058d0 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Mon, 21 Oct 2024 08:38:30 -0400 Subject: [PATCH 3/4] fix events init --- .../src/templates/angular-xmcloud/package.json | 2 ++ .../src/app/routing/scripts/cloud-sdk-init.component.ts | 7 +++++-- .../src/templates/nextjs-xmcloud/package.json | 3 +-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json index 2f01f8b4fd..c7ffff1bba 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json @@ -8,6 +8,8 @@ "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts" }, "dependencies": { + "@sitecore-cloudsdk/core": "^0.4.0-rc.0", + "@sitecore-cloudsdk/events": "^0.4.0-rc.0", "font-awesome": "^4.7.0", "sass": "^1.52.3", "sass-alias": "^1.0.5" 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 04625baa6d..8a99ae3c06 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 @@ -1,7 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; +import '@sitecore-cloudsdk/events/browser'; import { environment } from '../../../environments/environment'; -import { isServer } from '@sitecore-jss/sitecore-jss/utils'; +import { isServer } from '@sitecore-jss/sitecore-jss-angular'; /** * Component to init CloudSDK logic - to allow events throughout the site @@ -23,7 +24,9 @@ export class CloudSdkInitComponent implements OnInit { cookieDomain: window.location.hostname.replace(/^www\./, ''), // Cookie may be created in personalize middleware (server), but if not we should create it here enableBrowserCookie: true, - }).initialize(); + }) + .addEvents() + .initialize(); } } } diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json index 2df3d6d985..a1de39c0b6 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json @@ -1,8 +1,7 @@ { "dependencies": { "@sitecore/components": "^1.1.10", - "@sitecore-cloudsdk/core": "^0.4.0-rc.0", - "@sitecore-cloudsdk/events": "^0.4.0-rc.0", + "@sitecore-cloudsdk/core": "^0.3.1", "@sitecore-feaas/clientside": "^0.5.17" } } From 07bd4e763c951bf9d4ab7b16e28a43897748e0eb Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Mon, 21 Oct 2024 08:52:15 -0400 Subject: [PATCH 4/4] correct cloudsdk package in nextjs --- .../src/templates/nextjs-xmcloud/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json index a1de39c0b6..c2d7a5e3aa 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json @@ -1,7 +1,7 @@ { "dependencies": { "@sitecore/components": "^1.1.10", - "@sitecore-cloudsdk/core": "^0.3.1", + "@sitecore-cloudsdk/events": "^0.3.1", "@sitecore-feaas/clientside": "^0.5.17" } }