Hybrid mode alloy

react-shopping-cart-demo/.gitignore

@@ -10,3 +10,4 @@ node_modules
 npm-debug.log
 .vscode
 .idea
+at*.js

react-shopping-cart-demo/aepEdgeClient.js

@@ -0,0 +1,160 @@
+const { isDefined, isUndefined } = require("@adobe/target-tools");
+
+const { uuid } = require("@adobe/target-tools");
+const fetch = require("node-fetch");
+
+const PAGE_WIDE_SCOPE = "__view__";
+const AEP_COOKIE_PREFIX = "kndctr";
+
+let DEFAULT_REQUEST_HEADERS = {
+  accept: "*/*",
+  "accept-language": "en-US,en;q=0.9",
+  "cache-control": "no-cache",
+  "content-type": "text/plain; charset=UTF-8",
+  pragma: "no-cache",
+  "sec-fetch-dest": "empty",
+  "sec-fetch-mode": "cors",
+  "sec-fetch-site": "cross-site",
+  "sec-gpc": "1",
+  "Referrer-Policy": "strict-origin-when-cross-origin",
+};
+
+const AEP_EDGE_CLUSTERS = {
+  "SGP3;3": "konductor-prod.ethos11-prod-sgp3.ethos.adobe.net",
+  "IRL1;6": "konductor-prod.ethos12-prod-irl1.ethos.adobe.net",
+  "VA6;7": "konductor-prod.ethos10-prod-va6.ethos.adobe.net",
+  "AUS3;8": "konductor-prod.ethos11-prod-aus3.ethos.adobe.net",
+  "OR2;9": "konductor-prod.ethos12-prod-or2.ethos.adobe.net",
+  "JPN3;11": "konductor-prod.ethos12-prod-jpn3.ethos.adobe.net",
+  "IND1;12": "konductor-prod.ethos11-prod-ind1.ethos.adobe.net",
+};
+
+const AEP_EDGE_DEFAULT_BASE_URL = "edge.adobedc.net/ee";
+
+const SCHEMAS_PERSONALIZATION = [
+  "https://ns.adobe.com/personalization/default-content-item",
+  "https://ns.adobe.com/personalization/html-content-item",
+  "https://ns.adobe.com/personalization/json-content-item",
+  "https://ns.adobe.com/personalization/redirect-item",
+  "https://ns.adobe.com/personalization/dom-action",
+];
+
+function getBaseUrl(locationHint) {
+  if (isUndefined(locationHint)) {
+    return AEP_EDGE_DEFAULT_BASE_URL;
+  }
+
+  const base_url = AEP_EDGE_CLUSTERS[locationHint];
+
+  return isDefined(base_url) ? base_url : AEP_EDGE_DEFAULT_BASE_URL;
+}
+
+function convertHeadersToSimpleJson(res) {
+  const headersPromise = new Promise((resolve) => {
+    const result = {};
+    for (const pair of res.headers.entries()) {
+      result[pair[0]] = pair[1];
+    }
+    resolve(result);
+  });
+
+  return Promise.all([headersPromise, res.json()]);
+}
+
+function prepareAepResponse(requestHeaders, requestBody) {
+  return ([responseHeaders, responseBody]) => ({
+    request: {
+      headers: requestHeaders,
+      body: requestBody,
+    },
+    response: {
+      headers: responseHeaders,
+      body: responseBody,
+    },
+  });
+}
+
+function logResult(message) {
+  return (result) => {
+    console.log(message, JSON.stringify(result, null, 2));
+    return result;
+  };
+}
+
+/**
+ *
+ * @param {string} edgeConfigId
+ * @param {string} aepEdgePath
+ */
+function createAepEdgeClient(
+  edgeConfigId,
+  aepEdgePath = AEP_EDGE_DEFAULT_BASE_URL
+) {
+  function interact(requestBody, requestHeaders = {}) {
+    const requestId = uuid();
+    const requestUrl = `https://${aepEdgePath}/v2/interact?dataStreamId=${edgeConfigId}&requestId=${requestId}`;
+
+    const headers = {
+      ...DEFAULT_REQUEST_HEADERS,
+      ...requestHeaders,
+    };
+
+    return fetch(requestUrl, {
+      headers,
+      body: JSON.stringify(requestBody),
+      method: "POST",
+    })
+      .then(convertHeadersToSimpleJson)
+      .then(prepareAepResponse(headers, requestBody))
+      .then(logResult(`AEP EDGE REQUEST: ${requestUrl}`));
+  }
+
+  function getPropositions({
+    decisionScopes = [PAGE_WIDE_SCOPE],
+    xdm = {},
+    data = {},
+    meta = {},
+    requestHeaders = {},
+  }) {
+    const requestBody = {
+      event: {
+        xdm: {
+          ...xdm,
+          timestamp: new Date().toISOString(),
+        },
+        data: {
+          ...data,
+        },
+      },
+      query: {
+        identity: { fetch: ["ECID"] },
+        personalization: {
+          schemas: SCHEMAS_PERSONALIZATION,
+          decisionScopes,
+        },
+      },
+      meta: {
+        ...meta,
+      },
+    };
+
+    return interact(requestBody, requestHeaders);
+  }
+
+  return {
+    interact,
+    getPropositions,
+  };
+}
+
+function getAepCookieName(organizationId, name) {
+  return [AEP_COOKIE_PREFIX, organizationId.replace("@", "_"), name].join("_");
+}
+
+module.exports = {
+  getAepCookieName,
+  createAepEdgeClient,
+  AEP_COOKIE_PREFIX,
+  PAGE_WIDE_SCOPE,
+  getAepEdgePath: getBaseUrl,
+};

react-shopping-cart-demo/config.json

@@ -1,6 +1,7 @@
 {
-  "client": "adobetargetmobile",
-  "organizationId": "B8A054D958807F770A495DD6@AdobeOrg",
+  "client": "targetdataplatform",
+  "organizationId": "6FC947105BB267B70A495EE9@AdobeOrg",
+  "edgeConfigId": "34610d20-3c46-4636-b22f-eb87110dfb25",
   "timeout": 10000,
-  "serverDomain": "adobetargetmobile.tt.omtrdc.net"
+  "serverDomain": "targetdataplatform.tt.omtrdc.net"
 }

react-shopping-cart-demo/fetchh.js

@@ -0,0 +1,34 @@
+const fetch = require("node-fetch");
+
+async function main() {
+  const result = await fetch(
+    "https://adobesummit2018.tt.omtrdc.net/rest/v1/delivery?client=adobesummit2018&sessionId=76e1e7f60dd74a0c93220f2c379b777b&version=2.5.0",
+    {
+      method: "POST",
+      headers: {
+        Authority: "adobesummit2018.tt.omtrdc.net",
+        "User-Agent":
+          "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36",
+        "Content-Type": "text/plain",
+        Accept: "*/*",
+        "Sec-Gpc": "1",
+        Origin: "httpx://local-target-test",
+        "Sec-Fetch-Site": "cross-site",
+        "Sec-Fetch-Mode": "cors",
+        "Sec-Fetch-Dest": "empty",
+        Referer: "https://local-target-test",
+        "Accept-Language": "en-US,en;q=0.9",
+        "Accept-Encoding": "gzip",
+      },
+      body: '{"requestId":"eb219912-c872-4731-95b8-bad6b99b6218","context":{"userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36","timeOffsetInMinutes":-420,"channel":"web","screen":{"width":3360,"height":1890,"orientation":"landscape","colorDepth":24,"pixelRatio":2.5},"window":{"width":1107,"height":1342}},"id":{"tntId":"009c0ff0-2605-4525-b6ce-d0940ec99cfa"},"execute":{"mboxes":[{"parameters":{"countryGroup":"[\\"en_us\\", \\"en_ca\\"]","locale":"en_us","lineOfBusiness":"vegetable seeds","recommendationLocation":"product detail","recommendationType":"product","entity.id":"1"},"index":0,"name":"target-recommendations"}]}}',
+    }
+  ).then((res) => res.json());
+
+  const option = result.execute.mboxes[0].options[0];
+
+  const jsonContent = JSON.parse(option.content);
+  console.log(JSON.stringify(jsonContent, null, 4));
+  console.log(JSON.stringify(result, null, 4));
+}
+
+main();

react-shopping-cart-demo/index.tpl

@@ -12,25 +12,44 @@
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
   <link rel="stylesheet" href="assets/css/base.min.css">
   <link rel="stylesheet" href="assets/css/app.css">
-  <script src="VisitorAPI.js"></script>
   <script>
-    Visitor.getInstance("${organizationId}", {serverState: ${visitorState}});
+    !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
+      []).push(o),n[o]=function(){var u=arguments;return new Promise(
+      function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
+    (window,["alloy"]);
+
+    alloy("configure", {
+      "edgeConfigId": "${edgeConfigId}",
+      "orgId":"${orgId}",
+      "context": ["web"],
+      "debugEnabled": false
+    });
+
+    alloy("applyHandles", ${serverState});
+
+    /*
+    alloy("sendEvent",
+      {
+        "renderDecisions": true,
+        "xdm": {
+          identityMap: {
+            "FPID": [
+              {
+                "id": "123e4567-e89b-42d3-9456-426614174000",
+                "authenticatedState": "ambiguous",
+                "primary": true
+              }
+            ]
+          }
+        }
+      }
+    );
+     */
   </script>
-  <script>
-    window.targetGlobalSettings = {
-      overrideMboxEdgeServer: true,
-      clientCode: "${clientCode}",
-      imsOrgId: "${organizationId}",
-      serverDomain: "${serverDomain}",
-      serverState: ${serverState} || {}
-    }
-  </script>
-  <script src="at.js"></script>
+  <script src="alloy.js"></script>
 </head>
 <body>
   <div id="app"></div>
   <script src="assets/js/app.js"></script>
-  <script src="AppMeasurement.js"></script>
-  <script>var s_code=s.t();if(s_code)document.write(s_code);</script>
 </body>
 </html>