Samples for Target Node.js SDK v1.0.0 using Delivery API (adobe#5)

Author: XDex

.gitignore

@@ -1,3 +1,4 @@
 # package directories
 node_modules
 jspm_packages
+.idea

README.md

@@ -1,12 +1,32 @@
-# Marketing Cloud Client Samples
-
-This repository contains samples that use Marketing Cloud Client. Here is the list of samples:
-- `target-only` - shows how Marketing Cloud Client can be used in isolation
-- `mcid-integration` - shows how Marketing Cloud Client can be used in conjunction with MCID (Visitor API)
-- `mcid-customer-ids-integration` - shows how Marketing Cloud Client can be used in conjunction with MCID (Visitor API) and customer IDs. Customer IDs are useful in scenarios when user is logged in.
-- `mcid-analytics-integration` - shows how Marketing Cloud Client can be used in conjunction with MCID (Visitor API) and Adobe Analytics.
-- `mcid-analytics-atjs-integration` - shows how Marketing Cloud Client can be used in conjunction with MCID (Visitor API), Adobe Analytics and at.js. This sample shows how you can execute "hybrid" tests, when the test is started on the server side and then it is handed off to at.js on the client side.
-- `target-traces` - shows how Marketing Cloud Client can be used to retrieve Target execution traces.
-- `batch-mbox-v2-api-mcid-analytics-atjs-integration` - shows how Marketing Cloud Client can be used to execute Batch Mbox v2 API requests.
-
-For more documentation please check: https://www.npmjs.com/package/@adobe/target-node-client.
+# Target Node.js SDK Samples & Demos
+
+This repository contains samples and demos for the [Target Node.js SDK](https://www.npmjs.com/package/@adobe/target-nodejs-sdk)
+
+## Demos
+
+- [react-shopping-cart-demo](react-shopping-cart-demo) - a demo showing how to fetch and inject Target offers in a
+[React Redux](https://react-redux.js.org/) app on the server side and then instantly apply the offers on the client side,
+without any additional client-side Target calls. Check out the [Live Demo](http://target-nodejs-react-sample.eu-west-1.elasticbeanstalk.com).
+- [next-server-side-rendering-demo](next-server-side-rendering-demo) - a demo showing how to fetch and inject Target offers 
+in a [Next.js](https://nextjs.org/) server-side rendered app, and then instantly apply the offers on the client side,
+without any additional client-side Target calls. Check out the [Live Demo](http://target-nodejs-ssr-sample.eu-west-1.elasticbeanstalk.com).
+
+## Samples
+
+- [target-only](target-only) - shows how Target Node.js SDK can be used in isolation
+- [ecid-integration](ecid-integration) - shows how Target Node.js SDK can be used in conjunction with ECID (Visitor API)
+- [ecid-customer-ids-integration](ecid-customer-ids-integration) - shows how Target Node.js SDK can be used in 
+conjunction with ECID (Visitor API) and Customer IDs, useful for tracking user authentication.
+- [ecid-analytics-integration](ecid-analytics-integration) - shows how Target Node.js SDK can be used in conjunction 
+with ECID (Visitor API) and Adobe Analytics.
+- [ecid-analytics-atjs-integration](ecid-analytics-atjs-integration) - shows how Target Node.js SDK can be used in 
+conjunction with ECID (Visitor API), Adobe Analytics and at.js. This sample shows how to run testing in "hybrid" mode,
+when the test is started on the server side and then it is handed off to at.js on the client side.
+- [advanced-atjs-integration-serverstate](advanced-atjs-integration-serverstate) - shows how to use at.js v2.2+ **serverState** feature to apply Target offers fetched on the server side, without any additional client side content-fetching Target calls.
+- [target-traces](target-traces) - shows how Target Node.js SDK can be used to retrieve Target execution traces.
+- [shared-ecid-analytics-integration](shared-ecid-analytics-integration) - shows how to properly handle multiple Target 
+Node.js SDK API calls when processing a client request, sharing the same ECID instance.
+- [multiple-mbox-ecid-analytics-atjs-integration](multiple-mbox-ecid-analytics-atjs-integration) - shows how Target 
+Node.js SDK can be used to request content for multiple mboxes in the same Target call.
+
+For Target Node.js SDK documentation, see [Target Node.js SDK NPM page](https://www.npmjs.com/package/@adobe/target-nodejs-sdk).

advanced-atjs-integration-serverstate/README.md

@@ -0,0 +1,46 @@
+# Advanced at.js integration via serverState sample
+
+In the `ecid-analytics-atjs-integration` sample, we've showcased "hybrid" Target integration, where both the server-side and the client-side Target libraries are hitting the same Target edge cluster, sharing the same Target session and visitor state. However, at.js still needs to go over the wire for fetching Target content in the browser, prehiding the whole page BODY until Target offers are fetched and applied.
+
+But what if we could prefetch the Target content on the server-side, include it in the page returned to the client, and then just have at.js apply the Target offers immediately, without making another expensive network call?
+Also, in this case at.js will be able to prehide only the specific DOM elements for which Target offers have been fetched on the server-side, thus no longer requiring the prehiding of the whole page BODY.
+
+Target `serverState` is a new feature available in at.js v2.2+, that allows at.js to apply Target offers directly from content fetched on the server side and returned to the client as part of the page being served.
+
+In order to use this feature with Target Node.js SDK we just have to set `window.targetGlobalSettings.serverState` object in the returned page, from Target Delivery API request and response objects available after a successfull `getOffers()` API call, as follows:
+
+```js
+// First, we fetch the offers via Target Node.js SDK API, as usual
+const targetResponse = await targetClient.getOffers(options);
+// A successfull response will contain Target Delivery API request and response objects, which we need to set as serverState
+const serverState = {
+  request: targetResponse.request,
+  response: targetResponse.response
+};
+// Finally, we should set window.targetGlobalSettings.serverState in the returned page, by replacing it in a page template, for example
+const PAGE_TEMPLATE = `
+<!doctype html>
+<html>
+<head>
+  ...
+  <script>
+    window.targetGlobalSettings = {
+      overrideMboxEdgeServer: true,
+      serverState: ${JSON.stringify(serverState, null, " ")}
+    };
+  </script>
+  <script src="at.js"></script>
+</head>
+...
+</html>
+`;
+// Return PAGE_TEMPLATE to the client ...
+```
+
+Once the page is loaded in the browser, at.js will apply all the Target offers from `serverState` immediately, without firing any network calls against the Target edge. Additionally, at.js will only prehide the DOM elements for which Target offers are available in the content fetched server-side, thus greatly improving page load performance and end-user experience.
+
+Note: In case of SPAs using [Target Views and triggerView() at.js API](https://docs.adobe.com/content/help/en/target/using/implement-target/client-side/functions-overview/adobe-target-triggerview-atjs-2.html), at.js will cache the content for all Views prefetched on the server-side and apply these as soon as each View is triggered via `triggerView()`, again without firing any additional content-fetching calls to Target.
+
+## Usage
+1. Install dependencies: `npm i`
+2. Start: `npm start`