Installing the Salesforce Commerce Cloud cartridge

Learn how to use the Engagement Cloud cartridge to integrate your Salesforce Commerce Cloud cartridge.

Overview

Our certified cartridge for Salesforce Commerce Cloud is developed and integrated with both SiteGenesis and SFRA (3.2.0). Use the cartridge to:

  • Track abandoned carts
    Track the cart contents, identify users based on their email address, and trigger your abandoned cart program after a period of inactivity – you can define this in the configuration.
  • Site and ROI tracking
    • Track the journey of your contacts from your marketing campaigns to your website.
    • Track the ROI of customers who buy something after reading your campaign.
  • Optimize synchronization with OCAPI
    Track your customers' data updates on things like profile creation and address updates. By optimizing this customer data, you can sync using OCAPI.

Defining cartridge limitations

The cartridge doesn’t synchronize ecommerce data such as customers, orders and your product catalog. You can do this with our OCAPI integration.

Abandoned cart tracking for guests must be implemented separately by identifying the email address of a contact. Learn more in Abandonded carts.

Important

To use the cartridge, you must have an active dotdigital Engagement Cloud account.

Installing the cartridge

Step 1:Download the cartridge.

  1. Go to https://www.salesforce.com/products/commerce-cloud/partner-marketplace/partners/dotdigital/.
  2. Select DOWNLOAD INTEGRATION to download the integration .zip file to your local computer.

Step 2:Import the cartridge into UX Studio workspace.

  1. Open UXStudio in Eclipse IDE.
  2. Go to File > Import > General > Existing projects.
  3. Select the int_dotdigital file from the cartridges folder of the Integration file you downloaded in Step 1.
  4. Select Finish.
  5. Select OK, when it asks you to link the cartridge to the sandbox.

Step 3:Set up the cartridge path.

  1. Open and log in to SalesForce Business Manager.
  2. Go to Business Manager > Administration > Manage Sites.
  3. Select your site and then select Settings.
  4. Under Cartridges, enter your cartridge file name to the start of the cartridge path followed by a colon (int_dotdigital:).
  5. Select Apply.

Step 4:Import your metadata.

  1. Open and log in to SalesForce Business Manager.
  2. Go to Administration > Site Development > Site Import & Export.
  3. Under Import, select Choose File.
  4. Find and select the metadata.zip file from the Metadata folder of the Integration file you downloaded in Step 1.
  5. Select Upload to upload the file.
  6. After uploading, select metadata.zip from the list of uploaded files.
  7. Select Import.
  8. Select OK, when it asks you to confirm the import.

Step 5:Configure your metadata.

  1. Open and log in to SalesForce Business Manager.
  2. Go to Merchant Tools > Site Preferences > Custom Site Preference Groups > dotdigital Engagement Cloud Configuration Options.
  3. Enter your configuration settings.
  4. Select Save.

Configuration settings table

Setting Recommended value
Enable Abandoned Cart Yes
Program ID Enter the program ID you want to use
Cart Delay (in minutes) 5
Tracking Profile ID Enter your Web behaviour tracking profile ID
Enable Site Tracking Yes
Account Region Select your region
Enable ROI Tracking Yes

Customising your code

To complete the cartridge installation, you must make these code modifications. 

Code modification 1

In the file
/app_storefront_core/cartridge/templates/default/components/footer/footer_UI.isml

Enter this code snippet
<isinclude template="dotdigital_snippets"/>

Where
Enter the code at the end of the file.

sfcc1.png

Code modification 2

In the file
/app_storefront_core/cartridge/scripts/util/Resource.ds

Enter this code snippet

ENABLE_DOTDIGITAL_ABANDONEDCART_TRACKING: Site.getCurrent().getCustomPreferenceValue('DMACEnableTracking'), 
ENABLE_DOTDIGITAL_ROI_TRACKING: Site.getCurrent().getCustomPreferenceValue('DMROIEnableTracking')

Where
Enter the code after the line
CHECK_TLS: Site.getCurrent().getCustomPrefferenceValue('checkTLS'),

sfcc2.png

Code modification 3

In the file
/app_storefront_core/cartridge/js/app.js

Enter this code snippet

//init dotdigital Abandoned Basket Tracking 
if (SitePreferences.ENABLE_DOTDIGITAL_ABANDONEDCART_TRACKING) {
var dotdigital = require('./dotdigitalutils/dotdigital'); dotdigital.abandonBasketTracking();
}
//init dotdigital ROI Tracking
if (SitePreferences.ENABLE_DOTDIGITAL_ROI_TRACKING) {
var roitracking = require('./dotdigitalutils/roitracking'); roitracking.init();
}

Where
Enter the code after the code block

// Check TLS status if indicated by site preferences
if (Site Preferences.CHECK_TLS === true) {
tls.getUserAgent();
}

sfcc2.png

Code modification 4

In the file
/app_storefront_core/cartridge/js/pages/product/addToCart.js

Enter this code snippet

if (SitePreferences.ENABLE_DOTDIGITAL_ABANDONEDCART_TRACKING) {
var dotdigital = require('../../dotdigitalutils/dotdigital');
dotdigital.abandonBasketTracking(response);
}

Where
Enter the code after the code block

// handle error in the response
if (response.error) {
throw new Error(response.error);
} else {

And before the line
return response;

sfcc3.png

Code modification 5

Make the following changes to this folder:

  1. Go to the folder /app_storefront_core/cartridge/js.
  2. Create a folder named dotdigitalutils.
  3. Move these two files into the dotdigitalutils folder:
    • /int_dotdigital/cartridge/scripts/dotdigital.js
    • /int_dotdigital/cartridge/scripts/roitracking.js

Code modification 6

In the file
/app_storefront_controllers/cartridge/scripts/models/CustomerModel.js

Enter this code snippet
new Customer.object.profile.custom.lastModifiedDateTime = new Date();

Where
Enter the code after the line addressBook.removeAddress(address);

sfcc4.png

Code modification 7

In the file
/app_storefront_controllers/cartridge/scripts/models/CustomerModel.js

Enter this code snippet
customer.profile.custom.lastModifiedDateTime = new Date();

Where
Enter the code after the code block

if (setCustomerPassword.error || !CustoemrModel.setLogin(customer, email, password) || !Form.get('profile.customer').copyTo(customer.profile)) {
Transaction.rollback();
return false;
)

sfcc5.png

Code modification 8

In the file
/app_storefront_controllers/cartridge/scripts/models/AddressModel.js

Where
In three different locations:

  • Location 1
    Enter the code after the line
    addressBook.removeAddress(address);
    sfcc6.png
  • Location 2
    Enter the code after the code block
    if ('states' in addressForm) {
    if (!Form.get(addressForm.states).copyTo(address)) {
    return null;
    }
    }
    sfcc7.png
  • Location 3
    Enter the code after the block
    if ('states' in addressForm) {
      if (!Form.get(addressForm.states).copyTo(address)) {
        addressForm.invalidateFormElement();
        throw new Error('Unable to update address state');
      }
    }
    sfcc8.png

Code modification 9

In the file
app_storefront_core/cartridge/forms/default/billing.xml

Enter this code snippet
customer.profile.custom.lastModifiedDateTime = new Date();

Where
Enter the code after the line
addressBook.setPreferredAddress(address);

sfcc9.png

Code modification 10

In the file
app_storefront_core/cartridge/forms/default/billing.xml

Enter this code snippet
<field formid="addToEmailList" label="checkout.addtoemaillist" binding="custom.acceptsMarketing" type="boolean" mandatory="false" />

Where
Enter the code after the line
<field formid="addToAddressBook" label="checkout.addtoaddressbook" type="boolean" mandatory="false" />

sfcc10.png

Code modification 11

In the file
app_storefront_core/cartridge/forms/default/profile.xml

Enter this code snippet
<field formid="addtoemaillist" label="profile.addemailtolist" binding="custom.acceptsMarketing" type="boolean"/>

Where
Enter the code after the line
<field formid="phone" label="profile.phone" type="string" description="profile.phoneexample" mandatory="false" binding="phoneHome" max-length="50"/>

sfcc11.png

Checking your firewall settings

You don't need to allow any IP addresses on your allow list for the cartridge to work.

Testing your installation

Use this checklist to test your installation is set up correctly:

  • As a logged-in customer in your Salesforce Commerce Cloud storefront, check that the local storage DOTDIGITAL_AB_TRACKING exists.
  • Add or remove items from your cart and check that the local storage data is updated accordingly.
Did you find this article helpful?

Can we help?

Thanks for using Engagement Cloud. If you need more help or support, then contact our support team.