AEP Web SDK Implementation with Server-side and Alloy.js Orchestration

12.10.2022 — Adobe, AEP, Web SDK, Hybrid, Server-side — 1 min read

AEP Web SDK Implementation with Server-side and Alloy.js Orchestration

Web SDK Client-side Implementation

Step 1: Install Web SDK

To install Web SDK, there are options to use Data Collection UI, NPM package or CDN. We will grab files from CDN for this guide.

Minified CDN library: https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js Un-minified CDN library: https://cdn1.adoberesources.net/alloy/2.6.4/alloy.js

Use URL structure: https://cdn1.adoberesources.net/alloy/[VERSION]/alloy.min.js OR alloy.js for the non-minified version.

Add to HTML's <head> with a base code as shown below:

1<script>
2  !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
3  []).push(o),n[o]=function(){var u=arguments;return new Promise(
4  function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
5  (window,["alloy"]);
6</script>
7<script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js" async></script>

Step 2: Configure Web SDK

1alloy("configure", {
2  "edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
3  "orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
4});

AEP Edge API Server-side Implementation

We will use Alloy Samples repository to see how hybrid implementaiton is orchestrated. The repository includes multiple examples including client-side, server-side and hybrid approaches. Follow installation instructions to run a hybrid SPA demo from personalization-hybrid-spa folder. Once the Node Express app with React pages is running locally, let's examine the server-side implementation details.

THIS IS A WORK IN PROGRESS.

Documentation

https://experienceleague.adobe.com/docs/experience-platform/edge/fundamentals/installing-the-sdk.html?lang=en