cc-datacloud-typescript

cc-datacloud-typescript

cc-datacloud-typescript is a Typescript SDK that aids the developer on sending shopper interactions from their Typescript app to Salesforce Data Cloud.

This SDK includes the methods and types needed to successfully integrate the app with autoconfigured commerce mappings in Data Cloud.

How to use this SDK

Data Cloud Setup

  • Have a working Data Cloud instance with a website connector configured.
Steps
1. Download the Data Kit which includes the configuration for utilizing this SDK with your Data Cloud Org.

Dev Environment datakit

2. Get your Tenant ID and App Source ID

You will be needing your tenant id and app source id to configure the Typescript SDK.

  • Tenant ID is located at Data Cloud setup
  • Go to Data Cloud Setup and scroll down in the landing page. You will see tenantSpecificEndpoint which it will include the tenant ID as the first part in the url: <TENANT_ID>.pc-rnd.c360a.salesforce.com
  • App Source ID is located at your configured website connector
  • Go to your connector and scroll down in the main page. Under Integration Guide you will see Content Delivery Network Script which will include your app source id: https://cdn.pc-rnd.c360a.salesforce.com/beacon/c360a/<YOUR_APP_SOURCE_ID>/scripts/c360a.min.js

Build the Repository

  • Clone this repo using git clone

  • Change to the root directory of your repo and run yarn install or npm install

  • Then run yarn build:lib or npm build:lib

  • Run yarn link or npm link. This will allow this SDK can be used in your local system by other javascript/typescript projects.

  • Go to your app source and install (link) this SDK. Based on your package manager, run one of these commands:

    • If yarn, then use yarn add cc-datacloud-typescript
    • If npm, then use npm link cc-datacloud-typescript

  • Enjoy using the SDK!

Sample Usage

Here is an example of sending an interaction Type: AddToCart

With Typescript Client

import {initDataCloudSdk} from 'cc-datacloud-typescript/src'
import {DataCloudApi} from 'cc-datacloud-typescript/src/lib'
import {AddToCartBuilder, Cart, CartItem, Identity, PartyIdentification} from 'cc-datacloud-typescript/src/lib/models'

const currentDateTime = new Date().toISOString() 

const tenantId = 'xxxxxx'; // From above "Data Cloud Setup" step
const appID = 'xxxxx-xxxx-xxxx-xxxx-xxxxx'; // From above "Data Cloud Setup" step

const cartEventId =  crypto.randomUUID();

const sdk: DataCloudApi = initDataCloudSdk(tenantId, appID); 

// These are just sample values, they can be different for your application
const cart: Cart = {
    currency: 'USD',
    eventType: 'cart',
    eventId: cartEventId,
    dateTime: currentDateTime,
    sessionId: '0cd4c80e7dc0f7e0',
    deviceId: '0cd4c80e7dc0f7e0',
    sourceUrl: 'http://127.0.0.1:3000/',
    sourceUrlReferrer: 'http://127.0.0.1:3000/',
    sourceChannel: 'Web',
    category: 'Engagement',
    siteId: 'RefArch',
    id: 'my-cart-id',
    interactionName: "cart-add",
    eventStatus: "success",
    webStoreId: "my-webstore-id"
}

const cartItem: CartItem = {
    eventId: crypto.randomUUID(),
    dateTime: currentDateTime,
    eventType: 'cartItem',
    category: 'Engagement',
    deviceId: '0cd4c80e7dc0f7e0',
    sessionId: '0cd4c80e7dc0f7e0',
    siteId: 'RefArch',
    personalizationContentId: 'personalizationContentId',
    catalogObjectId: 'catalogObjectId',
    catalogObjectType: 'catalogObjectType',
    cartEventId: cartEventId,
    lineItemId: 'line-item-id',
    price: 45,
    quantity: 3,
    imageUrl: 'image-url',
    name: 'product-name'
}

const partyIdentification: PartyIdentification = {
    sourceLocale: "en_US",
    sourceUrlReferrer: "http://127.0.0.1:3000/",
    eventId: crypto.randomUUID(),
    dateTime: currentDateTime,
    eventType: "partyIdentification",
    category: "Profile",
    deviceId: '0cd4c80e7dc0f7e0',
    sessionId: '0cd4c80e7dc0f7e0',
    siteId: 'RefArch',
    partyIdentificationId: randomValues.partyIdentificationId,
    creationEventId: cartEventId,
    creationEventObject: "ShoppingCartEngagement",
    IDName: "TestName",
    IDType: "TestType",
    userId: "TestUserId",
};

const identity: Identity = {
    isAnonymous: "1",
    firstName: "TestFirstName",
    lastName: "TestLastName",
    country: "us",
    sourceLocale: "en_US",
    sourceUrlReferrer: "https://localhost/on/demandware",
    eventId: crypto.randomUUID(),
    dateTime: currentDateTime,
    eventType: "identity",
    category: "Profile",
    deviceId: '0cd4c80e7dc0f7e0',
    sessionId: '0cd4c80e7dc0f7e0',
    siteId: 'RefArch',
};

const interaction = new AddToCartBuilder()
    .withCart(cart)
    .withCartItem(cartItem)
    .withIdentity(identity)
    .withPartyIdentification(partyIdentification)
    .build()

await sdk.webEventsAppSourceIdPost(interaction)

Javascript Node JS Client

import {initDataCloudSdk}  from 'cc-datacloud-typescript';
import {DataCloudApi} from 'cc-datacloud-typescript/src/lib'
import {AddToCartBuilder, Cart, CartItem, Identity, PartyIdentification} from 'cc-datacloud-typescript/src/lib/models'

const currentDateTime = new Date().toISOString();

const cartEventId = crypto.randomUUID();

const tenantId = 'xxxxxx'; // From above "Data Cloud Setup" step
const appID = 'xxxxx-xxxx-xxxx-xxxx-xxxxx'; // From above "Data Cloud Setup" step

const sdk = initDataCloudSdk(tenantId, appID); 

// These are just sample values, they can be different for your application
const cart: Cart = {
    currency: 'USD',
    eventType: 'cart',
    eventId: cartEventId,
    dateTime: currentDateTime,
    sessionId: '0cd4c80e7dc0f7e0',
    deviceId: '0cd4c80e7dc0f7e0',
    sourceUrl: 'http://127.0.0.1:3000/',
    sourceUrlReferrer: 'http://127.0.0.1:3000/',
    sourceChannel: 'Web',
    category: 'Engagement',
    siteId: 'RefArch',
    id: 'my-cart-id',
    interactionName: "cart-add",
    eventStatus: "success",
    webStoreId: "my-webstore-id"
}

const cartItem: CartItem = {
    eventId: crypto.randomUUID(),
    dateTime: currentDateTime,
    eventType: 'cartItem',
    category: 'Engagement',
    deviceId: '0cd4c80e7dc0f7e0',
    sessionId: '0cd4c80e7dc0f7e0',
    siteId: 'RefArch',
    personalizationContentId: 'personalizationContentId',
    catalogObjectId: 'catalogObjectId',
    catalogObjectType: 'catalogObjectType',
    cartEventId: cartEventId,
    lineItemId: 'line-item-id',
    price: 45,
    quantity: 3,
    imageUrl: 'image-url',
    name: 'product-name'
}

const partyIdentification: PartyIdentification = {
    sourceLocale: "en_US",
    sourceUrlReferrer: "http://127.0.0.1:3000/",
    eventId: crypto.randomUUID(),
    dateTime: currentDateTime,
    eventType: "partyIdentification",
    category: "Profile",
    deviceId: '0cd4c80e7dc0f7e0',
    sessionId: '0cd4c80e7dc0f7e0',
    siteId: 'RefArch',
    partyIdentificationId: randomValues.partyIdentificationId,
    creationEventId: cartEventId,
    creationEventObject: "ShoppingCartEngagement",
    IDName: "TestName",
    IDType: "TestType",
    userId: "TestUserId",
};

const identity: Identity = {
    isAnonymous: "1",
    firstName: "TestFirstName",
    lastName: "TestLastName",
    country: "us",
    sourceLocale: "en_US",
    sourceUrlReferrer: "https://localhost/on/demandware",
    eventId: crypto.randomUUID(),
    dateTime: currentDateTime,
    eventType: "identity",
    category: "Profile",
    deviceId: '0cd4c80e7dc0f7e0',
    sessionId: '0cd4c80e7dc0f7e0',
    siteId: 'RefArch',
};

const interaction = new AddToCartBuilder()
    .withCart(cart)
    .withCartItem(cartItem)
    .withIdentity(identity)
    .withPartyIdentification(partyIdentification)
    .build()

await sdk.webEventsAppSourceIdPost(interaction)

Javascript Browser Client

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>cc-datacloud-typescript SDK for Browser Tag - Getting Started Application</title>
  </head>
  <body>
    <div id="textToSynth">
      <script type="module">
        import {initDataCloudSdk} from "./node_modules/cc-datacloud-typescript/src/index.js"; 
        function helloWorld() {
          const cartEventId = crypto.randomUUID();
          const cart = {
            eventType: 'userEngagement',
            eventId: crypto.randomUUID(),
            dateTime: cartEventId,
            sessionId: '0cd4c80e7dc0f7e0',
            deviceId: '0cd4c80e7dc0f7e0',
            sourceUrl: 'http://127.0.0.1:3000/',
            sourceUrlReferrer: '',
            sourceChannel: 'Web',
            category: 'Engagement',
            siteId: 'RefArch',
            id: 'my-cart-id'
          }
          const cartItem = {
              eventId: crypto.randomUUID(),
              dateTime: currentDateTime,
              eventType: 'userEngagement',
              category: 'engagement',
              deviceId: '0cd4c80e7dc0f7e0',
              sessionId: '0cd4c80e7dc0f7e0',
              siteId: 'RefArch',
              personalizationContentId: 'personalizationContentId',
              catalogObjectId: 'catalogObjectId',
              catalogObjectType: 'catalogObjectType',
              cartEventId: 'cart-event-id',
              lineItemId: 'line-item-id',
              price: 45,
              quantity: 3,
              imageUrl: 'image-url',
              name: 'what-name'
          }
          const partyIdentification = {
              sourceLocale: "en_US",
              sourceUrlReferrer: "http://127.0.0.1:3000/",
              eventId: crypto.randomUUID(),
              dateTime: currentDateTime,
              eventType: "partyIdentification",
              category: "Profile",
              deviceId: '0cd4c80e7dc0f7e0',
              sessionId: '0cd4c80e7dc0f7e0',
              siteId: 'RefArch',
              partyIdentificationId: randomValues.partyIdentificationId,
              creationEventId: cartEventId,
              creationEventObject: "ShoppingCartEngagement",
              IDName: "TestName",
              IDType: "TestType",
              userId: "TestUserId",
          };

          const identity = {
              isAnonymous: "1",
              firstName: "TestFirstName",
              lastName: "TestLastName",
              country: "us",
              sourceLocale: "en_US",
              sourceUrlReferrer: "https://localhost/on/demandware",
              eventId: crypto.randomUUID(),
              dateTime: currentDateTime,
              eventType: "identity",
              category: "Profile",
              deviceId: '0cd4c80e7dc0f7e0',
              sessionId: '0cd4c80e7dc0f7e0',
              siteId: 'RefArch',
          };
          const interaction = new AddToCartBuilder()
            .withCart(cart)
            .withCartItem(cartItem)
            .build()

          await sdk.webEventsAppSourceIdPost(interaction)
      }
      window.helloWorld=helloWorld;
      </script>
      <input autofocus size="23" type="text" id="textEntry" value=""/>
      <button class="btn default" onClick="helloWorld()">Send To DataCloud!</button>

      <p id="result">Press F12 to check the sent Data!</p>
    </div>
 </body>
</html>

Available Shopper Interactions

Shopper Interactions

Settings

Member Visibility

Theme

On This Page

cc-datacloud-typescript