For Order Attribution to work on your Custom eComm site, it is required that LoudCrowd Storefronts be already configured.
Additionally, your Order Confirmation page, will also need to have our LoudCrowd JS SDK installed in the same way as it is 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:
Prerequisites:
In order for the order confirmation page snipping to function correctly, We need to setup an integration to securely source order data from your custom ecomm.
The Events API is our recommended configuration for sourcing order data. This will cover order creation, updates, and data for return/refund events.
Alternatively, the Order Line Item SFTP with the Return File SFTP integrations will be sufficient for loudcrowd to source the relevant order data required for attribution and creator commissions.
Optionally, to mitigate data loss from data center and ISP outages, we recommend setting up both Events API and SFTP integrations where Events API allows LoudCrowd to receive order data immediately as they are placed and the SFTP integrations as backfill integrations.
Step One: Identify your site's Order Confirmation page
Order attribution works by notifying our servers after an Order happens, 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, like on an Order Summary page but before the Order is finalized, LoudCrow's Attribution system will likely fail to work correctly as we will get Order information for Orders that are aborted, cancelled or modified.
So it is important that the proper page, to install the Order Attribution JS Snippet, is identified.
Step Two: 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>
<script>document.addEventListener("DOMContentLoaded",()=>window.loudcrowd.init("SHOP_ID"))</script>
Where SHOP_ID is a LoudCrowd Identifier for the 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 Three: 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 page's <body> add the following snippet (inside a <script> tag):
<script>
async function dispatchOrderEvent() {
await window.loudcrowd.sendEvent(
'ORDER_INTAKE',
{
"order_data": {
"order_id": ORDER_ID,
"platform_ordered_at": PLATFORM_ORDERED_AT
}
}
);
}
if (window.loudcrowd) {
dispatchOrderEvent();
}
else {
document.addEventListener('loudcrowd-global-loaded', async () => {
await dispatchOrderEvent();
});
}
</script>
Where 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 Four: 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 tests orders (possibly visiting a test Storefront first should you have the ability to do so on your test environment) and consulting with us to check that we successfully got the Order data.
Then you can reproduce the configuration steps on your real production environment.
If you don't have the ability to setup a test environment first, you might still want to make a small real Order on your own shop to ensure everything is properly setup with us to receive the Order data.
If everything is working correctly then your site is ready to start receiving real Order data and attributing them to your Ambassadors!
ORDER_ID
This is the Order Id, number, UUID/GUID or whatever identifying field you use for the Orders on you own system.
PLATFORM_ORDERED_AT
This field on the "order_data" object should be the date the order was created represented as an ISO 8601 date+time string.