Optimizely Web Experimentation self-hosting for Amazon Cloudfront users

Create a Lambda function

The first step in the process is to create a new Lambda function. This function will listen for the Optimizely Web Experimentation webhook and update your local version of the snippet.

From the AWS interface, create a new Lambda function, starting with a blueprint. microservice-http-endpoint

1. Give your new function a descriptive name, such as optimizelywebhook

2. Create a new IAM role, or use an existing IAM role for this function that has access to both:

• Amazon S3 (policy: AmazonS3FullAccess), and

• Amazon CloudWatch logs (policy: AWSLambdaBasicExecutionRole or CloudWatchLogsFullAccess)

3. Next, create the function. This will enable you to edit your code.

4. Replace YOUR-AWS-S3-BUCKET-NAME with the bucket where you'd like to store your copy of your Optimizely Web Experimentation snippet.

Below is an example of an appropriate Lambda function:

import boto3
import json
from botocore.vendored import requests

def resp(err = None, res = {}):
   resp_body = {'message': str(err)} if err else res
   return {
       'statusCode': '400' if err else '200',
       'body': json.dumps(resp_body),
       'headers': {
           'Content-Type': 'application/json',
       },
   }

def Lambda_handler(event, context):
   err = None
   res = {}
   
   print('Received webhook: {}'.format(event['headers']['Host']))
   
   if event['httpMethod'] != 'POST':
       return resp(ValueError('Must be a post request'))
       
   # fetch snippet from Optimizely CDN
   try:
       snippet_metadata = json.loads(event['body'])
       snippet_origin   = snippet_metadata.get('data', {}).get('origin_url')
       project_id       = snippet_metadata.get('project_id')
       snippet_updated  = snippet_metadata.get('timestamp')
       snippet_contents = requests.get(snippet_origin).text
   except Exception as e:
       err = e
   
   # write snippet content to s3
   try:
       s3       = boto3.resource('s3')
       s3object = s3.Object('YOUR-AWS-S3-BUCKET-NAME', 'snippet/{}.js'.format(project_id))
       s3object.put(Body=snippet_contents, ACL='public-read', ContentType='application/javascript')
   except Exception as e:
       err = e
   
   return resp(err, {'message': 'success'})

This example configures the function to only accept POST requests, parse that request (based on a successful POST request), and save the Optimizely Web Experimentation snippet to your AWS S3 Bucket. The snippet is saved as your-aws-s3-bucket-name.com/snippet/PROJECTID.js

5. After saving your edits to the function, navigate to your API gateway trigger.

6. Under the API Gateway section, take note of your API endpoint. You will need this later for setting up your Optimizely Web Experimentation webhook.

Configure the Optimizely Web Experimentation webhook

1. In Optimizely Web Experimentation, open the project you would like to self-host and navigate to Settings.

2. Navigate to the Webhooks tab and click Create New Webhook…
   

3. You will be prompted for a URL where a POST request can be sent each time your snippet is updated. Enter the URL of your Lambda API endpoint from step 6 above.

Configure a custom TTL (optional)

To configure a custom TTL for this script, you will need to change your cache setting in your Cloudfront distribution from Customize to Use Origin Cache Headers.

You will then be able to include a cache-control setting in the function that writes the Optimizely Web Experimentation data to S3.

Example:

s3object.put(Body=snippet_contents, ACL='public-read', 
ContentType='application/javascript', CacheControl='max-age=120')

If you want your base Cloudfront TTL settings to apply to this script, leave Object Caching set to Customize.

Modify the Optimizely Web Experimentation snippet

If the Optimizely Web Experimentation snippet is already installed on your page, you will need to remove it and replace it with the new script tag that references your self-hosting path.

If you are new to Optimizely Web Experimentation, add this new script tag in the appropriate spot inside the <head> tag on your page.

The format of this snippet should be:

<script src=”your-aws-s3-bucket-name.com/snippet/PROJECTID.js”></script>

Example:

<script src="https://cdn.optimizely.com/js/123456789.js"></script>

should now be:

<script src=”your-aws-s3-bucket-name.com/snippet/123456789.js”></script>

Repeat this step for any additional snippets you may have across your site.