Code Monkey home page Code Monkey logo

wknd's Introduction

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 [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 :)

wknd's People

Contributors

ramboz avatar davidnuescheler avatar tripodsan avatar dylandepass avatar blefebvre avatar vaibhav2601 avatar mhaack avatar jalagari avatar askayastha22 avatar rofe avatar trieloff avatar alexkli avatar buuhuu avatar gklebus avatar iuliag avatar fkakatie avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.