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:
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
Skip this step if the Loudcrowd embed is installed globally.
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):
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();
})
}Where the fields in brackets need to be replaced with the appropriate data for the confirmed Order.
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 is the date + time represented as a string in ISO 8601 format. This date field should match identically to the corresponding order in your system
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 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!