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.

📘

NOTE

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 the development of the Salesforce site.

🚧

CAUTION

This 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 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 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.