Skip to content

Latest commit

 

History

History
87 lines (64 loc) · 4.49 KB

README.md

File metadata and controls

87 lines (64 loc) · 4.49 KB
Raw

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

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

Experimentation UI opened from the green pill-shaped button

  • 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

The document source which configures the experiments

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 helix@adobe.com
  • Extract and upload the contents of /docs/authoring/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 :)