Introduction
For LoudCrowd's Order Attribution system to work, a JavaScript code snippet needs to be added to the Order Confirmation template of the Salesforce Commerce Cloud site.
Note that to follow this article’s instructions you will need both access and requisite knowledge for modifying the Salesforce Cloud Commerce site. It is thus recommended to leave this task to a Salesforce Developer or engineer responsible for development of the Salesforce site. Please also note, this article’s instructions apply to Salesforce Cloud Commerce sites using SFRA and not SiteGenesis sites.
Prerequisites
For LoudCrowd’s Order Attribution to work properly, we need to be able to pair the Order with an Ambassador that got the customer into the site. In order for this to work, LoudCrowd’s Ambassador Storefronts need to be already configured on your site, as this is how we keep track of that. Please refer to the documentation on how to configure LoudCrowd’s Ambassador Storefronts if you have yet to do so:
Locating appropriate Cartridge and template file
You will need to either create a new cartridge for this modification or include the code inside of a preexisting cartridge. For the rest of this document it will be assumed that the snippet will be added to a preexisting cartridge with your site’s custom code.
Identify the appropriate cartridge for including the snippet and locate the file related to the order confirmation page.
[cartridge]/templates/default/checkout/confirmation/confirmation.isml
Should this file not be present, you might need to check other cartridges you have installed on your site.
Note: It is possible that your site might be using the default confirmation template from Salesforce base SFRA cartridge: app_storefront_base. Should this be the case, you will need to copy the confirmation template from the base cartridge into your site’s custom code cartridge, so you can include the snippet in there. This is because you should not normally modify the base cartridge, so you shouldn’t attempt to include LoudCrowd’s Attribution snippet in there.
Also remember that the cartridge’s code precedence depends on the Salesforce Site Manager’s site settings, under the “Cartridges” field. This means for example that if your cartridge appears later on the list than the “app_storefront_base” then the default confirmation.isml template will be loaded instead as it will take precedence over the one in your cartridge.
Inserting the LoudCrowd Order Confirmation snippet for attribution
Insert this snippet somewhere on the confirmation.isml template file. Ensure its not inside an <isloop> or <isif> tag that would make the code run many times or be incorrectly omitted.
If you have our LoudCrowd Embed JS globally deployed
This is the recommended approach as it should make use of the globally deployed LoudCrowd Embed JS as instructed on Storefront page installation document.
It sends the confirmed order's data to LoudCrowd so that attribution can happen.
<script>
async function dispatchOrderEvent() {
await window.loudcrowd.sendEvent(
'ORDER_INTAKE',
{
"order_data": {
"order_id": ${pdict.order.orderNumber},
"platform_ordered_at": ${orderedAtDate}
}
}
);
}
if (window.loudcrowd) {
dispatchOrderEvent();
}
else {
document.addEventListener('loudcrowd-global-loaded', async () => {
await dispatchOrderEvent();
});
}
</script>
On this snippet you need to replace the following:
The "order_id" field on the “order_data” object is populated using the default Salesforce SFRA available data on the confirmation page with the default OrderModel. Should your Salesforce site be heavily customized, the "orderNumber" attribute might be renamed, or not be present as expected by the snippet. In this case you need to modify the snippet so that the appropriate data is included properly on the “order_data” object.
The "platform_ordered_at" field on the "order_data" object should be the date the order was created represented as an ISO 8601 date+time string.
If you DON'T have our LoudCrowd Embed JS globally deployed
This is approach is not recommended and will cause issues if the LoudCrowd Embed JS is loaded more than once. It should be only used in special cases, like if your store redirects to a separate domain or website on Order Confirmation.
In addition to sending the confirmed order's data to LoudCrowd, this snippet loads the LoudCrowd Embed JS directly in the Order Confirmation page.
<script>
async function dispatchOrderEvent() {
window.loudcrowd.init([SHOP_ID]);
await window.loudcrowd.sendEvent(
'ORDER_INTAKE',
{
"order_data": {
"order_id": ${pdict.order.orderNumber},
"platform_ordered_at": ${orderedAtDate}
}
}
);
}
document.addEventListener('loudcrowd-global-loaded', async () => {
await dispatchOrderEvent();
});
let script = document.createElement('script');
script.src = "https://pub.loudcrowd.com/embed.js";
script.setAttribute('type', 'module');
document.head.appendChild(script);
</script>
On this snippet you need to replace the following (in addition to the prior's snippet fields):
[SHOP_ID] the ID for your Salesforce Integration on your LoudCrowd account (If you don’t already have it then you may get it from your LoudCrowd Client Strategist)
Upload the cartridge and ensure correct installation
At this point you should be ready to upload your cartridge with the JS snippet added to it. Be sure to check that everything is properly set up.
Note about compliance with requirements for tracking opt-in/opt-out and disclosure
Please be acutely aware that certain jurisdictions impose requirements so that customers must be informed when information about them or any of their activities is collected. LoudCrowd’s Web Events may be required to follow those requirements.
Research whether the jurisdictions you do commerce in (US state, European Union, Canada, Australia, etc) have such requirements and if necessary ensure the appropriate measures are taken to be compliant with the requirements.
For example, should your jurisdiction require gathering customer data to be opt-in, you should add a dialog (like those “Allow cookies” ones) to allow customer to opt-in to the data gathering. Then LoudCrowd’s JS snippet should be configured such that it only runs if the customer allowed data gathering.
Taking these steps will protect you from legal liability that you would otherwise be exposed to if you disregard jurisdiction requirements.