Salesforce Commerce Cloud

FullStory's integration with Commerce Cloud makes it easy to get FullStory installed on your Commerce Cloud store.

The FullStory platform allows for users to better understand how consumers use their site. Simply hook into any Salesforce Commerce Cloud platform with the int_fullstory cartridge. The Commerce Cloud integration allows SFCC users to get FullStory deployed on their site quickly with very little coding or engineering time required.

The integration will automatically pass unique IDs, email addresses, and first name / last name for customers who have an account with your Commerce Cloud store.  

The FullStory cartridge is compatible as of Salesforce Commerce Cloud 17.8, and supports both pipelines and controllers. Future versions should also remain compatible.

Installation Instructions

The FullStory cartridge can be found in the Salesforce Commerce Cloud store. The full instructions are included in the downloaded files and can also be found here: FullStory SFCC Cartridge installation.pdf 

Below are the main implementation instructions as taken from the pdf file. 

Cartridge Layout

The int_fullstory cartridge runs off of four primary files, that pull in FullStory functionality with Javascript snippets.  Below is an overview of the filesystem:


File Name

Description

fullstory.css

Used for any FullStory styling

fullstoryidentify.js

Identifies Customers by their ID/email/location if logged in

fullstorysnippet.js

Identifies general user behaviour

fullstoryidentify.isml

Pulls in Customer information for consumption by fullstoryidentify.js

fullstoryinclude.isml

Launches FullStory with information for consumption by fullstorysnippet.js


Metadata

FullStory comes with site preferences as well as a Customer Attribute, that help the cartridge work properly.  No custom objects, business manager modules, or jobs are used for this integration.

Metadata

Description

Default Value

fullstoryOrganization

The account ID given by FullStory

-

fullstoryEnable

If true, FullStory will actively be recording sessions

false

fullstoryIdentified

Shows if a customer is registered with FullStory

false

fullstoryDebug

If true, FS Debugging will activate. 

false

fullstoryNamespace

The namespace given by FullStory. This should ONLY be changed if necessary. Read more about namespace for FullStory.

FS


Initial Setup

  • Download the int_fullstory cartridge and corresponding metadata
  • Import the int_fullstory cartridge into your Eclipse environment, and attach the cartridge to a Sandbox
  • Within Business Manager, navigate to “Administration > Sites > Manage Sites > $YourSites$ > Settings.”  
  • Ensure that the int_fullstory cartridge is the first called cartridge, as it will be called in the head, with minimal to no performance impact

Metadata

  • Download the metadata, and upload it into “Administration > Site Development > Import & Export > Upload”  
  • Import it by clicking “Import,” which is located under the Metadata module on the same Import & Export area
  • Verify that you have Custom Site preference


Configuration

Configuration should only involve inserting the proper site preferences for your FullStory implementation.  No other parts of Business Manager will be touched.

Custom Code

There are three areas that you will need to alter the Storefront Cartridge, in order to call FullStory properly.  It should be noted that this cartridge is called in the page’s head, however FullStory has taken extensive precautions to ensure that this does not impact performance.  This script should be kept in the head, to enable full FullStory functionality.

  • Navigate to ${your storefront core cartridge}/cartridge/templates/default/header/htmlhead.isml 
  • Add the following code:
<iscomment>FullStory Integration.  This must be in the head, in order to track completely.</iscomment>
<isif condition="${'fullstoryEnable' in dw.system.Site.current.preferences.custom && dw.system.Site.current.preferences.custom.fullstoryEnable == true}">
<link rel="stylesheet" href="${URLUtils.staticURL('/css/fullstory.css')}" />
<isinclude template="fullstoryinclude"/>
</isif>



Next, call FullStory once a customer logs in

  • Navigate to ${your storefront core cartridge}/cartridge/templates/default/components/footer/footer.isml 
  • Add the following code:
<isif condition="${pdict.CurrentCustomer.registered}">
<isif condition="${'fullstoryEnable' in dw.system.Site.current.preferences.custom && dw.system.Site.current.preferences.custom.fullstoryEnable == true}">
<isinclude template="fullstoryidentify"/>
</isif>
</isif>

Can’t find what you’re looking for?

The FullStory team awaits your every question.

Contact Us