Skip to main content

Step by Step: Integrating Storefronts with Custom eComm Solutions

Al Nafea avatar
Written by Al Nafea
Updated over 2 years ago

Front-End Steps

Step 1: Creating a page within your eCommerce and Adding the Javascript Library Code

A. Creating your Base Template Webpage

LoudCrowd storefronts run on the concept of web-components, whereas your site can load and use functional components of LoudCrowd programs right in your own eCommerce platform.

  1. Create a page within your eCommerce platform and open it for html editing.

    Note LoudCrowd’s web components render based off of URL parameters and login status, and therefore only requires one page within your system.

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

    <script type="text/javascript"><https://loudcrowd.com> extensions/assets/ambassador-storefront.js</script>

  3. Next, in the body tag, you will need to place divs as placeholders for each of the web-components you desire to be displayed. For example:

<ambassador-hero-block></ambassador-hero-block> <ambassador-ugc-block></ambassador-ugc-block> <ambassador-products-block></ambassador-products-block>

Note: LoudCrowd currently supports three web components for Storefonts.

  • Ambassador-hero-block: renders the header banner, including the social user’s profile picture, biography, follower count, etc.

  • Ambassador-ugc-block: renders ambassador UGC from TikTok and Instagram, automatically

  • Ambassador-products-block: renders the Ambassadors product selections to have on their Storefront

Note: You'll need to work with dedicated client strategist on setting up your program. Until that is correctly setup, this code returns generic elements.

B. Enter your Base Template Webpage in LoudCrowd

In order to dynamically produce the bespoke tracking/rendering link for each recipient of a Storefront, LoudCrowd needs to know the exact base template URL. LoudCrowd appends a unique identifier to the end of the base URL template as a parameter. This parameter enables attribution tracking to each Storefront owner, and instructs each web component how to render. The below goes into how to enter the base URL in LoudCrowd.

Note*:* You'll need to work with dedicated client strategist on setting up your program. Until that is correctly setup, you will not be able to enter the base template URL.

  1. Login to your LoudCrowd account and go to Programs > Your Program > Settings

  2. Scroll down to the Base Template URL input box and enter the URL you set when creating your Base Template.

Note: If your base URL template is www.nike.com/ambassador-storefront, then the linked format for each member’s Storefront will take the format www.nike.com/ambassador-storefront?lcamid=<unique-identifier>

C. Personalize your Storefront Appearance to Match your Branding and Page Structure

The web components rendered by our javascript can be custom styled via CSS to match your brand’s aesthetic. For example the hero block above will create, at it’s root, a html element with the tag of <ambassador-hero-block>. Your developers then can target that element using the CSS accessor.

For example, if you wanted to change the font color to blue, you just need to include this CSS on the page:

ambassador-hero-block { color: blue; }

If needed, your dedicated CSM will provide you with the full list of possible CSS targets.

Step 2: Create and Deploy a Sign-Up Page (Optional)

LoudCrowd makes Storefront sign-ups feel native to your brand experience, and easy to implement. The standard sign-up page lives on your site, as an additional page, and only requires a single LoudCrowd Javascript module for the sign-up button in order to synchronize the customer sign-up with LoudCrowd.

A. Finding your LoudCrowd Sign-up Modal

  1. Navigate to Programs > the program > Edit Embed Script

  2. The result modal will contain a customization wizard for your embed script. Hit copy embed script to receive the resulting sign-up button

    Your default/example embed script will look something like:

    <div id="lc-signup-container" data-lc-button-text="Join Now" data-lc-button-text-color="white" data-lc-button-bg-color="blue"><script type="text/javascript" src="<https://pub.loudcrowd.com/launch.js?hid=><unqiue-identifier>"></script></div>

    Note: any additional customization desired can easily be applied using CSS

B. Creating your Sign-Up Page + Embed Script Implementation

Collaborate with your dedicated account team on the design of your Storefront sign-up page. Once complete, leverage your web developers or LoudCrowd’s dedicated web developers to create the sign-up page on your eComm.

  1. Create a page within your eCommerce platform and open it for html editing.

  2. Create the contents of the page as if it were any other new landing page.

  3. Wherever there is a CTA to apply, ensure the embed script acquired through the above is implemented.

Lastly, you’ll want to test the new sign-up page with your dedicated account team before directing potential Storefront owners to sign-up. Particularly, your dedicated support team will be looking for the following

  1. The sign-up modal pops up when hitting any apply CTA on the new sign-up page

  2. The sign-up modal features the correct Storefront intake questions

  3. Completion of the sign-up modal sends the appropriate data to LoudCrowd and that the information appears in your LoudCrowd account

  4. [Some cases] Completion of the sign-up modal redirects the applicant to their dedicated Storefront

Back-end Steps

Step 3: Provide LoudCrowd with login status

In order to provide the correct group of Storefront owners with "Edit Access" (like editing their projects) to their respective pages, the LoudCrowd web-components need to know if and who is logged into your store. To do this ,we have provided a login method in our main Javascript snippet, that can be called on page load to identify the logged in customer. This script will also grab the lcamid parameter from the url of the page.

window.loudcrowd.login("[email protected]");

The LoudCrowd system will check the email address against the known email of the Storefront owner, and given a match, will allow for the “Edit Access” features to be turned on.

Likewise, there is a logout function:

window.loudcrowd.logout();

You’ll work with your dedicated account team to ensure the required customer information (customer unique ID / email) is exposed and accessible to the LoudCrowd web components.

Step 4: Integrate or Upload your Product Catalog to LoudCrowd

You must send your product information to LoudCrowd in order for LoudCrowd to display products on each Storefront. You will need to leverage a one time Product API connection to synchronize your product backend with LoudCrowd.

By default, LoudCrowd will need the below information synchronized to create the native Storefront experience.

  • Product ID: your systems unique identifier per product

  • Product title: the name of the product

  • Product URL: the URL to the products actual page

  • Product image: the image of the product

  • Product price: active price of the product

  • Other tags: in-stock, on sale, etc.

Furthermore, if you want Storefront owners to only be able to pick a select set of those products in their storefronts. You will need to provide a list of groupings of the above products that are allowed.

  • Group ID: your system’s unique identifier per collection

  • Group Title: the name of the collection

  • Group Products: a list of product ids in the collection

Note: it is recommended that in addition to the above standard product information, the below is considered as well

  • Product hierarchy: We recommend sending to LoudCrowd your parent product categories

  • Product Identifiers: We highly recommend including all available product identifiers, including SKU, Brand, etc.

Step 5: Setup Order Conversion tracking

A. Getting Started with the LoudCrowd Pixel

Conversion tracking is essential for LoudCrowd and your brand to incentivize individuals to drive sales through their Storefronts. The LoudCrowd Tracking Pixel is one option to synchronize your commerce data

  1. Receive your LoudCrowd Pixel from your Account Team: Your dedicated Account Team, including Implementation Engineers, will provide you with a Javascript snippet that tracks the required Click and URL events.

LoudCrowd Click Events: Count every time someone clicks on a specific element on your website/Storefronts - like adding something to a cart from a Storefront. Click events use web elements of the buttons or links that you want to track.

LoudCrowd URL Events: Count user visits to specific pages on your website as events. This could include the confirmation page after a "complete payment" or a "thank you" page. URL events use keywords contained in the URL of the page you want to track. Traffic to each Storefront is captured via URL events.

By default, each tracking pixel will support the following Click events:

  • Add to Cart - when a visitor adds an item to their cart

  • Complete Payment / Place an Order - when a visitor has successfully checked out

By default, the pixel base code will always include 'page view' events which tracks when a visitor lands on your website and where they came from. Storefront attribution is tracked via the lcamid parameter**.**

Note: List of Currencies Supported: AED, ARS, AUD, BDT, BHD, BOB, BRL, CAD, CHF, CLP, CNY, COP, CRC, CZK, DKK, DZD, EGP, EUR, GBP, GTQ, HKD, HNL, HUF, IDR, ILS, INR, ISK, JPY, KES, KHR, KRW, KWD, KZT, MAD, MOP, MYR, NGN, NIO, NOK, NZD, OMR, PEN, PHP, PHP, PKR, PLN, PYG, QAR, RON, RUB, SAR, SEK, SGD, THB, TWD, UAH, USD, VES, VND, ZAR.

  1. Install your LoudCrowd Pixel: Your pixel will take the following form:

    <script type="text/javascript">(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//loudcrowd.com/{{APP_KEY}}/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore()})();</script><script>LoudCrowd Conversion = {orderId: "ORDERID", orderAmount: "AMOUNT", orderCurrency: "CURRENCY"}</script>

    Paste the pixel code at the top of the header section on your website. Website headers start with the <head> tag and close with the </head> tag.

    For Example:

    <!---Example___><!DOCTYPE html > <head> "LoudCrowd Pixel" </head></html>

    Note Some website themes have an alternative location to add Header and Footer Scripts, which you can paste the pixel into the header section. Please check with your website developer for assistance in these cases.

    Note Only paste your pixel once. Excessive instances of pixels could slow down your site’s performance.

  2. Verify successful installation of the pixel: successful implementation of the pixel will immediately result in required data being synchronized with LoudCrowd’s systems.

    Your dedicated account team will work with you on a test simulation to ensure events are properly being tracked in the LoudCrowd system. You’ll work with your account team on numerous scenarios to verify proper functioning:

    • Traffic from Instagram or TikTok

    • Traffic from blog (Wordpress)

    • Other potential storefront traffic

B. Getting Started with the Google Tag Manager Implementation

Google Tag Manager (GTM) is a tag management system that enables you to easily add measurement snippets, collectively known as tags on your site. LoudCrowd has developed a tag template that allows you to integrate with Google Tag Manager, enabling you to add Pixel Custom Code events with little to no developer resources.

This below explains the steps to add the LoudCrowd Pixel client-side tag to your website.

Confirm the pre-requisites:

  1. You need to have a Google Tag Manager workspace.

  2. You should be using a Web container.

  3. You need to have Google Tag Manager installed on your website.

There will be two methods of installing the LoudCrowd Client Side template to your Workspace.

A. Installing via the Workspace UI

  1. Login to your Google Tag Manager Account.

  2. Navigate to Templates > Search Gallery and search for the LoudCrowd Pixel template by LoudCrowd

  3. Select Add to workspace to import your template to your workspace

  4. Save and close the template editor

B. Installing Base Code through Custom HTML

  1. Receive LoudCrowd Pixel Base code from your dedicated account team

  2. Go to your Workspace > Select Tags > Select New

  3. Name your tag (e.g. LoudCrowd Pixel Base Code) > Click Tag Configuration > Select Custom HTML

  4. Copy the LoudCrowd Base Code fro your dedicated account team and paste it into the HTML field > Set the trigger to All Pages

After installing the base code, you’ll want to ensure that the required Click and Web LoudCrowd events are selected. For each event (Add to Cart & Complete Purchase), follow the below steps.

  1. Go to your Workspace > Select Tags > Select New

  2. Give your Tag a name, e.g. LoudCrowd AddToCart, and select the template you just imported (LoudCrowd Pixel)

  3. Choose the AddToCart event.

  4. Then, set a Trigger of your choice. It is recommended to select the Google Tag Manager custom event you are using on your page.

  5. Save your tag.

Lastly - confirm successful implementation of the code. Your dedicated account team will work with you on a test simulation to ensure events are properly being tracked in the LoudCrowd system. You’ll work with your account team on numerous scenarios to verify proper functioning:

  • Traffic from Instagram or TikTok

  • Traffic from blog (Wordpress)

  • Other potential storefront traffic

Did this answer your question?