Edge Delivery Services - WKND Demo

Codebase for the fictional WKND site, showcasing the capabilities of Adobe's Edge Delivery Services. Highlights include:

• Experimentation capabilities
• Conversion tracking
• Slack Bot integration for monitoring Lighthouse score and conversions
• Document based content authoring

Environments

• Preview: https://main--wknd--hlxsites.hlx.page/
• Live: https://main--wknd--hlxsites.hlx.live/

Installation

npm i

Tests

npm tst

Capabilities

Before you begin, ensure you have the AEM Sidekick Chrome extension installed.

Experimentation

Experimentation docs

• Load the site's Preview URL (above)
• Note the green "Experiment" pill-shaped button in the bottom right corner
• Click the button to open the Experimentation UI
• Click the "Simulate" button next to an experiment to view how that variant will render for the end user

• To see how this experiment is configured, right-click on the AEM Sidekick extension and select "View document source"
• Scroll down to the Metadata block at the bottom of the document
• Note the Experiment, and Instant Experiment properties
• The Instant Experiment property defines the pages used for the "challenger" variants in the Experimentation UI

Conversion Tracking

RUM docs

• You will need to fork this repository in order to access "Real User Monitoring" (RUM) data, including conversion data, via the Slack Bot
• In your fork, point fstab.yaml to a SharePoint or Google Drive folder that you own, and is shared with [email protected]
• Download documents.zip from this project's Demo Hub page in the Resources, Assets section. Note: you will need to be logged in to the Demo Hub to access this page
• Extract and upload the contents of documents.zip to seed this folder with content. Publish the content to your forked site using the AEM Sidekick
• Install the Github bot on your forked repository using this link: https://github.com/apps/helix-bot/installations/new
• Using the AEM sidekick, publish the content that you would like to track conversions for (at minimum, the index and adventures documents)
• For details on project setup, reference the Developer Tutorial
• Follow the Slack Bot installation docs to set up the bot in your own channel
• To generate some traffic data for your forked site, you can use the included Puppeteer script (/test/puppeteer/generate-traffic.mjs):

# Set the value of TEST_URL to your forked site's Preview URL
WKND_URL=https://main--wknd--<YOUR-GITHUB-USERNAME-OR-ORG>.hlx.live npm run generate-traffic

# For example, using the WKND Demo repository, and running 1000 iterations:
WKND_URL=https://main--wknd--hlxsites.hlx.live ITERATIONS=1000 npm run generate-traffic

Slack Bot

Slack Bot docs

• Follow the "Conversion Tracking" steps above to enable the Slack Bot
• Refer to the Slack Bot Skills section for details on querying the underlying data from Slack
• To query the performance of an experiment, try the following command: @Franklin Bot how is experiment experiment-0001 doing?

Document based content authoring

Authoring docs

• Follow the "Conversion Tracking" steps above, ensuring that fstab.yaml in your fork points to a SharePoint or Google Drive folder that you own
• Refer to the Authoring docs for details on authoring functionality
• Modify and "Preview" the documents in your SharePoint or Google Drive folder to see the changes reflected on the Preview environment
• To go deeper, refer to the Anatomy of a Project doc, and check out the Block Collection

Local development

1. Clone this repository to your machine
2. Add the helix-bot to the repository
3. Install the Helix CLI: npm install -g @adobe/helix-cli
4. Start Helix Pages Proxy: hlx up (opens your browser at http://localhost:3000)
5. Open the {repo} directory in your favorite IDE and start coding :)