In this blog post, you will learn the integration of three systems, through the SAP Customer Data Cloud GConnector tool. It’s a solution to implement SAP Customer Data Cloud within a CMS or e-commerce platform likeSAP Commerce Cloud and Composable Storefront.
You will learn:
- What is the GConnector tool?
- The main features of the integration
- Step-by-Step configuration in the three systems
GConnector for CMS or eCommerce is a tool that implements SAP CDC features within a CMS or e-commerce platform.
The customer's session and customer data are synced in real-time between SAP CDC and the CMS or e-commerce.
Some of the Key Features include:
- Support for Customer Identity
- Session synchronization
- Secure by design
- UID-based sync
- Field mapping and hooks for data transformation
- Easy logging and debugging
- Built-in localization support, including inheriting language from the CMS and fallback language definition.
- Data sync between SAP CDC and the CMS is based on the CDC UID. This way, user information is independent of any input the user provides (such as name or e-mail) and passed consistently between systems to provide seamless integration and improve the users' experience. The UID field is created automatically in the CMS when installing the GConnector package.
- When configuring SAP CDC for CMS integrations, the e-mail is always the login identifier (included in the loginID).
- Fields in one system are dynamically mapped to the corresponding field in the other system. By default, the GConnector usually maps the following fields for every user in every CMS: first name, last name, and e-mail.
SAP CDC integration provides a set of SAP Commerce Cloud extensions to enable Customer Identity, real-time customer data sync and to manage profile updates and user consent from SAP Commerce Cloud.
SAP CDC screen-sets are implemented on the SAP Commerce Cloud side as a set of CMS components in the gigyaloginaddon extension, Customer Identity and Social login flows are going through the SAP CDC.
Session Management
First you may choose whether you want the GConnector to manage the sessions or use SAP Commerce Cloud. If you choose SAP Commerce Cloud (Hybris), then everything is handled by the SAP Commerce Cloud CMS.
If you choose SAP CDC to lead the session, then the GConnector will control when the sessions end.
You can utilize a single session configuration between some or all of your storefronts, it is not necessary to create multiple configurations, unless you want the storefronts to have different session configurations.
Field Mapping
By default, the following required SAP Commerce Cloud fields are mapped from SAP CDC to SAP Commerce Cloud on registration, login, and profile update:
- UID
- firstName
Data Sync
The data in the mapped fields is synced automatically every time a user logs in, or a user's profile is updated (regardless of whether it is being updated via the user or a Backoffice User). You can configure the way the synchronization will be handled in your SAP CDC Configuration. This synchronization happens via tasks or in the same thread as the update/login. By default, all synchronizations are asynchronous.
Setting up SAP Customer Data Cloud in the Console
Now let's get started on actually implementing the integration between the three systems: SAP Customer Data Cloud, SAP Commerce Cloud and Composable Storefront.
First, we go to the SAP Customer Data Cloud Console to create a site and an application.
In SAP Customer Data Cloud Console, navigate to Sites -> Site Selector and choose Create Site, to create a site for the SAP Commerce Cloud integration.
On the Add Site popup, enter the Site Domain and choose a local data center – EU.
Choose OK to create the site.
Back on the Sites screen, find the new site and click on the API Key value to copy and back up the site API key for future reference.
To make sure the site’s screen-sets are initialized, navigate to User Interfacing -> UI Builder and wait for the Web Screen-Sets tab to be fully loaded and you can see the Default screen-sets.
Now we can create the permission group and application for the SAP Commerce Cloud integration.
Navigate to Administration -> Access Management -> Permission Groups and choose Create Group.
On the Create New Group popup, enter the name and choose Create to create the permission group.
Back on the Permission Groups screen, click on the three-dot actions menu on the new group and choose Edit.
On the Edit ### Group screen, choose the necessary privileges on the Privileges tab. For example, you can give the Write Access to User Records, Delete User Records under Identity Access, the Full API Access under External Integrations.
Choose Save to save the permission grants.
On the Scope tab, choose the site you created in the previous step for the integration and choose Update Scope.
It’s fine to use the default configurations on the other tabs.
Next, we’ll create an application and assign the permission group.
Navigate to Administration -> Access Management -> Applications and choose Create New Application.
On the Create New Application popup, enter the Name and choose a permission Group. Choose Create to create the application.
Now that the SAP Customer Data Cloud configurations are completed, we can go ahead and configure SAP Commerce Cloud.
Preparing the Git repository for SAP Commerce Cloud and Composable Storefront
First, we need a Git repository to push the SAP Commerce Cloud codes and configurations. In this blog post, we’re going to use the SAP Git repository https://github.tools.sap/ to commite and push the SAP Commerce Cloud and Composable Storefront codes.
The SAP Commerce Cloud backend codes and configurations are committed at https://github.tools.sap/cx-education-content/C4H620/tree/main/core-customize.
The SAP Commerce Cloud Composable Storefront frontend codes are committed at https://github.tools.sap/cx-education-content/C4H620/tree/main/js-storefront.
Let’s walk through some of the codes and configurations to understand how to integrate SAP Commerce Cloud and Composable Storefront with SAP Customer Data Cloud.
In the SAP Git reposiotry https://github.tools.sap/cx-education-content/C4H620/, navigate to the core-customize folder and open the manifest.json file, it’s the cloud build instructions file for SAP Commerce Cloud.
In the manifest.json file, we specify the SAP Commerce Cloud version to 2211.10 and the hybris-commerce-integrations extension pack version to 2211.10 version as well.
The useConfig section specifies the local configuration files to be included in the cloud build. As an example, we’ll look into the api.properties file for the api aspect or service in a minute.
The extensions to be built are specified in the localextensions.xml file, we’ll see the gigya extensions in the file as well.
Navigate to the core-customize/hybris/config folder and open the localextensions.xml file. At the end of the file, we see the gigya extensions. These are the SAP Commerce Cloud codes and configurations to implement the SAP Customer Data Cloud integration features. For example, the gigyabackoffice extension implements the Backoffice capability to connect with SAP Customer Data Cloud, map the fileds and configure the sessions, etc.
Navigate to the core-customize/hybris/config/environments folder and open the api.properties file.
We added the property entries for the S3 storage bucket configuration, including the access key and secret. A better approach would be putting the secret in a security file and upload it from the cloud portal, or adding the secret properties directly on the cloud portal as service properties.
Navigate to the core-customize/hybris/bin/custom/ folder. The spartacussampledata extension is used to import the sample data to the Composable Storefront site.
Navigate to the js-storefront folder and open the manifest.json file. This is the Composable Storefront cloud build instructions, where we specify the Angular application name, CSR and SSR path, RBSC repository and node.js version number.
Navigate to the js-storefront/b2cstore/src/app/spartacus/features folder. We added a cdc folder and module CdcFeatureModule.
Open the cdc-feature.module.ts file in the cdc folder. In the codes, we imported the CDC integration feature module, which will only be lazy loaded when the features are accessed. We also added the CDC config, including the SAP Commerce Cloud base site id, CDC site API key and Web SDK.
The CdcFeatureModule needs to be included in the spartacus-features.module.ts file under js-storefront/b2cstore/src/app/spartacus/, otherwise it won’t be loaded into the SAP Commerce Cloud Composable Storefront application.
Both the backend and frontend application codes are ready in the SAP Git repository, we can now use SAP Commerce Cloud Portal to build the backend and frontend codes and deploy the build to a cloud environment.
Building and Deploying SAP Commerce Cloud and Composable Storefront
Logon the Cloud Portal and navigate to Repository under Resources. Enter the repoistory URL, username, token and choose Save.
Navigate to Builds under Deployment.
Choose Create, enter a name and the Git branch “main” and choose Save to create a new build.
The new build will be scheduled and the build will start in a few minutes. It will usually take around 30 minutes to fully build the backend and frontend applications.
The build is started and you can see the progress bar is current at 30%.
You can click on the build or the progress bar to see the detailed build steps.
When the new build is completed and successful, choose the build on the Builds screen and then choose Deploy to Environment.
On the Deploy Build screen, choose the target enviornment p1, Initialize database for Platform Update Mode, and Recreate for Deployment Mode.
Choose Deploy to start the deployment. It usually take around 40 minutes to completely deploy the build on the Kubernetes cluster.
Once the deployment is completed and successful, we’re taken to the enviornment page, where we can see the Status, Public Endpoints and Services, etc.
Choose the Backoffice URL and login with the admin credentials copied from the hcs_admin service properties.
Now we can setup the connection with SAP Customer Data Cloud, map the SAP Customer Data Cloud fileds and configure the user sessions in the Backoffice.
Setting up SAP Customer Data Cloud connection in the Backoffice
In the Backoffice, navigate to Customer Data Cloud Configuration under SAP Customer Data Cloud and choose the + button.
On the Create SAP Customer Data Cloud Config popup, enter a code, CDC site API key, CDC data center, CDC application key and secret.
Choose the SAP Commerce Cloud CMS site from the dropdown and Choose Finish to create the CDC configuration.
Navigate to Session Configuration under SAP Customer Data Cloud and choose the + button.
On the Create Session Configuration popup, enter a code for the configuration. Choose SAP CDC for Session Lead, choose Browser Closed for Session Type, enter -1 for Session Duration in Seconds, choose the CDC configuration and choose Finish to create the configuration.
Navigate to Customer Data Field Mappings under SAP Customer Data Cloud and choose the + button. We’ll create two mapping for the email and name fields.
On the Create Field Mapping popup, enter a code and choose the CDC config. Choose Both for Sync Direction, enter name for Hybris Attribute Name, enter firstname for Customer Data Cloud Attribute Name, choose string for Hybris Type.
Choose Finish to create the mapping for the name field.
Choose the + button to create a mapping for the email field, for Sync Direction please choose G2H, meaning sync from CDC to Commerce.
And this completes the integration setup in the three systems, and you can now go to the Composable Storefront to verify the SAP CDC flows and other integration features.
For more information about SAP Commerce Cloud, Composable Storefront and SAP Customer Data Cloud, please refer to the learning journeys and live sessions on the SAP learning site.
Getting started on Composable Storefront Development (fka Spartacus)
SAP Customer Data Cloud Essentials
SAP Commerce Cloud System Administrator - Cloud Infrastructure and Portal
- SAP Managed Tags:
