Install Attribution snippet into Order Confirmed page
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.
NOTETo 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 the development of the Salesforce site.
CAUTIONThis articleâs instructions apply to Salesforce Cloud Commerce sites using SFRA, not to 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:
Setup a new API client in Salesforce Account Manager and integrate that client with LoudCrowd
Install the LoudCrowd Storefront page in your Salesforce Website
Locating appropriate Cartridge and template file
You must create a new cartridge for this modification or include the code inside a preexisting cartridge. For the rest of this document, the snippet will be assumed to 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 should check other cartridges you have installed on your site.
Note: It is possible that your site might be using the default confirmation template from the Salesforce base SFRA cartridge: app_storefront_base. Should this be the case, you must copy the confirmation template from the base cartridge into your siteâs custom code cartridge so you can include the snippet there. This is because you should not usually modify the base cartridge, so you shouldnât attempt to include LoudCrowdâs Attribution snippet.
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 embed JS code for attribution
Insert this snippet somewhere on the confirmation.isml template file. Ensure it's not inside an <isloop>
or <isif>
tag that would make the code run many times or be incorrectly omitted.
<script>
async function dispatchOrderEvent() {
window.loudcrowd.init([SHOP_ID]);
await window.loudcrowd.sendEvent(
'ORDER_INTAKE',
{
"order_data": {
"order_id": ${pdict.order.orderNumber}
}
}
);
}
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:
- [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 Customer Success contact)
- The
order_id
field on theorder_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, theorderNumber
attribute might be renamed or absent 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.
Upload the cartridge and ensure the correct installation
You should be ready to upload your cartridge with the JS snippet added to it. Be sure to check that everything is appropriately 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 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 comply 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 customers to opt-in to the data gathering. Then, LoudCrowdâs JS snippet should be configured so that it only runs if the customer allows data gathering.
Taking these steps will protect you from legal liability you would otherwise be exposed to if you disregard jurisdiction requirements.
Updated 6 months ago