[angular][xmcloud] Init CloudSDK on browser (#1952)

* [angular][xmcloud] Init CloudSDK on browser

* PR followup

* fix events init

* correct cloudsdk package in nextjs

CHANGELOG.md

@@ -64,6 +64,10 @@ 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))
+
 
 ### 🛠 Breaking Change
 

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"

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts

@@ -0,0 +1,32 @@
+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-angular';
+
+/**
+ * Component to init CloudSDK logic - to allow events throughout the site
+ */
+@Component({
+  selector: 'app-cloud-sdk-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,
+      })
+      .addEvents()
+      .initialize();
+    }
+  }
+}

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html

@@ -1,3 +1,4 @@
 <ng-container>
   <sc-editing-scripts></sc-editing-scripts>
+  <app-cloud-sdk-init></app-cloud-sdk-init>
 </ng-container>

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 {}