For Order Attribution to work on your Custom e-commerce site, LoudCrowd Storefronts must already be configured.

Your Order Confirmation page must also have our LoudCrowd JS SDK installed on the LoudCrowd Storefronts.

Please consult our article on the configuration of LoudCrowd Storefronts if you have yet to do so or need to check how to install the LoudCrowd JS SDK into the Order Confirmation page.

Step 1: Identify your site's Order Confirmation page

Order attribution works by notifying our servers after an order happens and by sending a web event on the Order Confirmation page.

📘
NOTE
The Order Confirmation page we are referring to a page that is displayed after the Order is confirmed and a payment method has been accepted, usually thanking the customer for their patronage. These defer from site to site, but most e-commerce systems have one.

If Order attribution is set up incorrectly, such as on an Order Summary page, but before the Order is finalized, LoudCrowd's Attribution system will likely fail to work correctly as we will get Order information for Orders that are aborted, canceled, or modified.

The proper page to install the Order Attribution JS Snippet must be identified.

Step 2: Install LoudCrowd JS SDK on the Order Confirmed page

In the <head> of that page, load and initialize the main LoudCrowd Base code snippet:

<script type="module" src="https://pub.loudcrowd.com/embed.js" />
<script>document.addEventListener("DOMContentLoaded",()=>window\.loudcrowd.init("SHOP\_ID"))</script>

Where SHOP_ID is a LoudCrowd Identifier for your site, ask your LoudCrowd representative for your SHOP_ID.

The page's Content Security Policy will need to be updated to allow our UI to load:

📘
NOTE
For each rule, only add LoudCrowd if you already have a policy for that rule.

script-src \*.loudcrowd.com\
style-src \*.loudcrowd.com
media-src \*.loudcrowd.com lookaside.fbsbx.com
img-src \*.loudcrowd.com lookaside.fbsbx.com
connect-src \*.loudcrowd.com

Step 3: Install the Order Attribution JS Snippet

Now that the Order Confirmed page has our LoudCrowd JS SDK installed, we are ready to install the Order Attribution JS Snippet, which is responsible for using the SDK to send the Order notification web event.

Somewhere in the page<body>, add the following snippet (inside a <script> tag):

async function dispatchOrderEvent() {
await window.loudcrowd.sendEvent(
'ORDER_INTAKE',
{ 
"hmac": "[ORDER_DATA_HMAC]",
"order_data": {
"order_id": "[ORDER_ID]",
"currency_code": "[CURRENCY_CODE]",
"platform_ordered_at": new Date().toISOString(),
"platform_updated_at": new Date().toISOString(),
"amount": "[SALE_AMOUNT]",
"tax": "[SALE_TAX]",
"shipping": "[SALE_SHIPPING]",
"email": "[SALE_EMAIL]",
"phone": "[SALE_PHONE]"
}
}
);
}

if (window.loudcrowd) {
dispatchOrderEvent();
}
else {
document.addEventListener('loudcrowd-global-loaded', async () => {
await dispatchOrderEvent();
})
}

The fields in brackets need to be replaced with the appropriate data for the confirmed Order.

Please check the reference for each field's data at the end of this document.

Step 4: Test everything is working correctly

At this stage, everything should be configured correctly.

If you configured it on a test environment first, it might be a good idea to make some test orders (possibly visiting a test Storefront first, should you be able to do so on your test environment) and consult with us to check that we successfully obtained the Order data.

Then, you can reproduce the configuration steps in your actual production environment.

If you can't set up a test environment first, you might still want to make a small real Order on your own shop to ensure everything is properly set up with us to receive the Order data.
If everything is working correctly, your site is ready to start receiving real Order data and attributing them to your Ambassadors!

Snippet Field reference

ORDER_DATA_HMAC

The [ORDER_DATA_HMAC] is an HMAC-SHA256 that must be computed on the backend using the LC Secret Key you obtained from your LoudCrowd representative.

The data hashed is your Ecomm integration ID, [ORDER_ID], [SALE_AMOUNT], [CURRENCY_CODE], [SALE_EMAIL] and [SALE_PHONE], all concatenated, joined by commas (,).

For example: aW50GWdyYXRpc246N4M1,6523,100,USD,[email protected],.

📘
NOTE
The fields are all separated by commas, and despite there being no phone data for the order, there is still a final comma after the email.

The email and phone fields are unique in that only one of the two is required. Should your orders only have phone data and not email data, the hashed data would look like this: aW50GWdyYXRpc246N4M1,6523,100,USD,,+1 (555) 555-5555

📘
NOTE
After “USD” there are two commas. The “slot” for email is respected, even if no data is there.

This data should then be used to compute the HMAC-SHA256 and added to the payload, as shown in the snippet.

CURRENCY_CODE

This is the standard currency code for the currency used in the order, like USD, CAD, AUD, etc.

SALE_AMOUNT, SALE_TAX, SALE_SHIPPING

These are the amounts in the currency specified on the CURRENCY_CODE field, for the Order. They shouldn’t include any currency symbols.

ORDER_ID

This is the Order ID, number, UUID/GUID, or whatever identifying field you use for Orders on your system.

SALE_EMAIL, SALE_PHONE

The email and phone numbers were used as contact information to create the Order.

Please note that while none of the two fields are strictly required, at least one must be filled.