CRM and CX Blogs by SAP
Stay up-to-date on the latest developments and product news about intelligent customer experience and CRM technologies through blog posts from SAP experts.
cancel
Showing results for 
Search instead for 
Did you mean: 
samuelyang
Product and Topic Expert
Product and Topic Expert
2,933

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 namelast 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.

samuelyang_0-1711545089620.png

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.

samuelyang_1-1711545104571.png

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.

samuelyang_2-1711545118988.png

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.

samuelyang_3-1711545131949.png

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.

samuelyang_4-1711545145686.png

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.

samuelyang_5-1711545199042.png

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.

samuelyang_6-1711545212839.png

The SAP Commerce Cloud backend codes and configurations are committed at https://github.tools.sap/cx-education-content/C4H620/tree/main/core-customize.

samuelyang_7-1711513672870.png

The SAP Commerce Cloud Composable Storefront frontend codes are committed at https://github.tools.sap/cx-education-content/C4H620/tree/main/js-storefront.

samuelyang_8-1711513684697.png

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.

samuelyang_9-1711513708278.png

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.

samuelyang_10-1711513724791.png

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.

samuelyang_11-1711513744377.png

Navigate to the core-customize/hybris/config/environments folder and open the api.properties file.

samuelyang_12-1711513752516.png

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.

samuelyang_13-1711513764247.png

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.

samuelyang_14-1711513774342.png

Navigate to the js-storefront/b2cstore/src/app/spartacus/features folder. We added a cdc folder and module CdcFeatureModule.

samuelyang_15-1711513789678.png

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.

samuelyang_16-1711513805321.png

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.

samuelyang_17-1711513815263.png

Navigate to Builds under Deployment.

Choose Create, enter a name and the Git branch “main” and choose Save to create a new build.

samuelyang_18-1711513827717.png

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.

samuelyang_19-1711513842948.png

The build is started and you can see the progress bar is current at 30%.

samuelyang_20-1711513849992.png

You can click on the build or the progress bar to see the detailed build steps.

samuelyang_21-1711513869581.png

When the new build is completed and successful, choose the build on the Builds screen and then choose Deploy to Environment.

samuelyang_22-1711513878487.png

On the Deploy Build screen, choose the target enviornment p1, Initialize database for Platform Update Mode, and Recreate for Deployment Mode.

samuelyang_23-1711513891351.png

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.

samuelyang_24-1711513900885.png

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.

samuelyang_25-1711513924612.png

Choose the SAP Commerce Cloud CMS site from the dropdown and Choose Finish to create the CDC configuration.

samuelyang_26-1711513935269.png

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.

samuelyang_27-1711513947003.png

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.

samuelyang_28-1711513962500.png

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.

samuelyang_29-1711513972759.png

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.

samuelyang_7-1711545509002.png

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

6 Comments
Summitt12
Participant
0 Kudos

Great blog,

Does it connector supports CDC Central login pages (CLP)/Hosted pages

samuelyang
Product and Topic Expert
Product and Topic Expert
0 Kudos

Hi @Summitt12 

Thanks for your reading:)

Yes, the CMS GConnector supports CLP/Host Pages. In that case we'll have to replace the login link/button on the CMS site with the CLP URL and when the CDC flow is completed we can redirect users back to the CMS site, either manually through a button or link on the CLP page or automatically through the onLogin event handler from the CDC WebSDK. 

Hope that helps.

Summitt12
Participant
0 Kudos

Does SAP have a Demo site, which shows Commerce and CDC integration for login via CLP or embded screen sets

samuelyang
Product and Topic Expert
Product and Topic Expert
0 Kudos

Hi @Summitt12 For the demo site, please check with your SAP sales team or CEE reps, they might have a shared demo instance. 

If you are interested in this topic, please register our SAP Customer Data Cloud & Commerce Cloud Integration Essentials Live Session scheduled for next Monday 9am CET. We'll walk you through the integration process, step by step, in the real systems. 

Summitt12
Participant
0 Kudos

Great blog

1. How can Customers monitor this Commerce and CDC integration

2. Does it use Wbhooks in CDC to send notifiation to Commerce

3. Does it work for both Commerce B2B and B2C records

Regards

samuelyang
Product and Topic Expert
Product and Topic Expert

Hi @Summitt12 

Thanks for your reading 🙂

1, Regarding the morning features, we can monitor the integration from both Commerce side and CDC side.

From Commerce side, we can fine tune the log4j2 loggers and then monitor the application logs from ES/OpenSearch.

From CDC side, we can monitor the incoming API calls using the Audit logging feature in the CDC Admin Console.

2, The OOTB standard integration package does not use CDC webhooks to send notifications to Commerce, but feel free to use webhooks to implement project specific requirements or flows. In that case, you'd implement some public OCC API endpoints to listen to the CDC events. Other than webhooks, you can also use CDC extensions to enhance the standard CDC flows from Commerce side. 

3, This blog only talks about the B2C integration, please stay tuned to the SAP Customer Data Cloud & Commerce Cloud Integration Essentials live session for the B2B integration...

Hope that helps.