Purpose
In order to use LoudCrowd functionality anywhere on your website, you first need to install the LoudCrowd SDK.
The SDK is a light-weight javascript package that performs several functions on different pages across your site. The SDK enables you to:
Render app blocks (web components) with LoudCrowd and eCommerce data, including:
Creator Storefronts
Creator Lists (profiles that link to Storefronts)
Shoppable UGC
These app blocks are commonly installed on: Storefront page, Homepage, Product Detail and Collection Pages
Expose the Creator Widget to logged in program members.
The widget allows your creators to easily curate their Storefront collections and generate their affiliate links as a seamless part of their browsing experience on your site. The Creator Widget currently operates on all Product Detail Pages.
Use LoudCrowd's affiliate tracking & attributions.
The SDK is a required part of the setup to attribute purchases to specific creators in your LoudCrowd program. It sends LoudCrowd events for affiliate link landings. Data sent includes the page URL (to identify the specific affiliate) and an anonymous site visitor ID. No identifiable information about your site visitors is sent back to LoudCrowd.
Install LoudCrowd JS SDK
1. Locate the base template page of your site
To ensure that LoudCrowd functions consistently and correctly across your eCommerce store, our app must be deployed on the base page template. You need to identify the base template used for rendering other pages, such as product list, product detail, collection, search result, cart, checkout and custom pages.
Important: It is common for many e-commerce teams to want to add our javascript to the page using a tag manager like Google Tag Manager (GTM) or Adobe Launch (formerly DTM). However, due to the latest privacy and security settings in iOS 17+, most of those tag managers are being blocked by default, thus rendering the storefronts unusable for a significant percentage of buyers. LoudCrowd's javascript is used to load dynamic content in to the components, not perform user tracking or profiling. Therefore, our recommendation is to not use tag managers to load Loudcrowd javascript.
2. Add the LoudCrowd Base Code Snippet to your base template page
In the <head> of the base page template, load and initialize the main LoudCrowd Base code snippet:
<script type="module" src="https://pub.loudcrowd.com/embed.js"></script>
<script>
function initLoudCrowd() {
window.loudcrowd.init("SHOP_ID");
};
if (window.loudcrowd) {
initLoudCrowd();
} else {
document.addEventListener("loudcrowd-global-loaded", initLoudCrowd);
}
</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
Supporting locale
If the eCommerce site supports multiple languages on the same domain, then you can tell us what language the user has selected via the same embed script. Note: this requires product feeds to have translations in them in order to change the language of product names, etc.
To switch the language on page load, add parameters to window.loudcrowd.init to specify language like so:
window.loudcrowd.init("SHOP_ID", { locale: "en-US" })
// or
window.loudcrowd.init("SHOP_ID", { locale: { language: "en", region: "US" } })or after page load, and after calling window.loudcrowd.init by calling changeLocale:
window.loudcrowd.changeLocale("en-US")
window.loudcrowd.changeLocale({ language: "en": region: "US")the locale can be any of:
locale string supported by BCP-47 ex: "en", "en-US"
An Intl.Locale object
An object like:
language: ISO-639 alpha2 language string
region(optional): ISO-3166 alph2 country/region
{ language: "en" } or { language: "en", region: "EU" }
Adding Custom Tracking Parameters to Product URLs
You can enhance your analytics and tracking capabilities by adding custom parameters to the Product Detail Page (PDP) URLs generated by the LoudCrowd SDK. This feature allows you to append any key-value pairs you need as URL parameters, which will be automatically added whenever a user clicks on product cards or shop buttons within the LoudCrowd interface.
To implement this, you will need to initialize the SDK with the pdpTrackingParams object. Inside this object, you can define the key-value pairs for each of the tracking parameters you wish to include.
Example
To add generic tracking parameters, such as source, campaign, and medium, you would configure the SDK as follows:
window.loudcrowd.init('your-shop-id', { pdpTrackingParams: { 'source': 'loudcrowd', 'campaign': 'creator_storefront', 'medium': 'social' } });With this configuration, when a user clicks on a product, the resulting URL will automatically include these custom parameters (e.g., ...&source=loudcrowd&campaign=creator_storefront&medium=social). This allows for more flexible and detailed tracking of user behavior and campaign performance originating from your LoudCrowd integrations.
That's it!
LoudCrowd is now successfully installed on your eCommerce store. Now you can move on to these next steps:
Build Creator Storefront page using LoudCrowd app blocks
Enable the Creator Widget on your Product Detail Pages
Set up Purchase Attribution for your Creator Affiliates