At Made by Many, we've been using many tools—including Optimizely, WebTranslateIt, JIRA, Mixpanel, Google Analytics, and Google Sheets—to enable and track rapid development and testing of new features and ideas. In this post, I'll explain step-by-step how to create and display a simple banner on your website without having to take up any of your developer's or designer's time.

Above: An example of how you might use Optimizely to inject an HTML banner into your website. In Part 1 of this tutorial we'll be keeping it simple by injecting only one banner and showing it to everyone who visits our site.

Optimizely is a great service that makes split-testing your website fast, easy, manipulable, and insightful. With Optimizely, you can choose whom to include in each split test, how to allocate test participants across your experimental conditions, and what to test. Optimizely also includes some basic reporting tools to understand how your tests' variants are performing.

The key to Optimizely is that tests are performed by executing relevant JavaScript methods as each page loads. This means that, so long as the correct Optimizely JavaScript code snippet is included on every page you're testing, you can quickly and easily run JavaScript methods to edit your page without having to bother your web developer and deploy a new build.

For example, let's say our lead developer is busy fixing a critical bug in our orders system for one of our clients, but Made by Many want to add a banner to our home page advertising that we're looking for a freelance front-end developer to join our awesome NYC office! Instead of interrupting our developer's critical bug fixing work for our client, I as a semi-literate programmer can use Optimizely to quickly implement a simple banner ad that'll appear to all visitors to the Made by Many site—all without touching our master code base.

First, the Made by Many team and I decide what our needs are:
• Who do we want to see this banner?
• On what pages do we want this banner to appear?
• What creative (i.s., copy and images) do we need for this campaign?

In this example, we want all visitors to our website (https://madebymany.com) to see this banner ad. For simplicity's sake, we'll show this banner only on the Made by Many home page. And since this is a simple textual banner, our designer doesn't have to mock up any assets; instead, our developer and our designer can provide advisory roles to ensure that whatever I mock up looks good and is coded well.

To be organized, I always start by creating a Story in JIRA on our Campaigns Kanban board. This gives us a JIRA ticket identifier (e.g., JIRA-001) that I can use to keep track of everything related to this particular story.

If you haven't already created an Optimizely project for your website, you can do so by clicking "Create New Project" in the left hand column and entering in your desired Project Name. Every Optimizely project has a unique Project ID that's used by each project's experiments to ensure that only valid experiments run on your website. (The only work your developer will have to do that you probably can't do yourself is to make sure your website is running the same Optimizely JavaScript code snippet that your project is using.)

Once your project is set up, you can go ahead and create a new Optimizely experiment within it. We'll give it a good Experiment Name (e.g., "JIRA-001 Front-end Dev Banner") and appropriate Experiment URL (in our case, https://madebymany.com).* Note that you could actually set your initial Experiment URL to any page with a valid Optimizely code snippet; however, setting your URL to a relevant page makes previewing your changes easier.

Entering in our Experiment Name and Experiment URL will open up our new Optimizely "experiment." However, before we add our JavaScript to make our job banner appear, let's set up our experiment and enter in our target URLs, target audience, and desired traffic allocation.

Above: What Optimizely looks like when editing an experiment. I've highlighted the various areas where you'll be clicking in order to get your desired changes up and running.

To set our target URLs, click "Options" in the top-right corner and select "URL Targeting." In the window that appears, I'll type in "https://madebymany.com" and select "Simple match" as my match condition. Save your changes by clicking "Apply."

To set our target audience, click on the Audience icon towards the top-right of the screen. (It looks like three people standing in a group!) By default it should be set to "Everyone." For our purposes, this is perfect, so we can close out without any changes; however, if we needed any kind of advanced audience targeting (e.g., only showing our changes to particular banner ad traffic or referral links), this is where we would select our audience.

Finally, to set our traffic allocation, we want to go back into "Options" and select "Traffic Allocation." Since we want all visitors to see our lovely new banner, we'll set the percentage of visitors who see our Original version to 0.00% and the percentage of visitors who see Variation #1 (which will contain our banner) to 100.00%. Click "Apply" to save our changes.

At last, it's time to create our banner! While you can work from within Optimizely's GUI, I find it much more satisfying and powerful to work directly in JavaScript. Doing so does require some basic knowledge of JavaScript and jQuery, but nothing at the level of even an intermediate programmer. If you're interested in learning yourself, I highly recommend the free and easy online tutorials from MDN —they're how I learned basic HTML / CSS / JS many years ago—in addition to browsing the jQuery documentation. For now, though, definitely feel free to follow along and copy-paste and to consult your friendly local developer for advice.

To work directly in JavaScript, click the "edit code" button in the bottom-right corner of the screen. Clicking this button will open up a pane at the bottom of your browser window where you can enter in the JavaScript that'll run for that particular variant. After playing around in Google Chrome's developer console, doing a lot of Googling for how to do things, and getting some help from our developer Chris on how to make it responsive, I finally manage to create and insert my banner via the following JavaScript:

Notice that I've used single quotes instead of escaped double quotes inside of my double quotes. We've noticed that Optimizely doesn't escape escaped quotes reliably but that single quotes inside of double quotes always work. Additionally, I've noticed that sometimes Optimizely seems to enter an infinite loop when using jQuery methods that insert code before other code. To avoid this, I've used the jQuery method "prepend" instead of "before" to make sure that my inserted HTML is only inserted once. (This second bug might also just be psychosomatic, but it's still something I look out for...)

And...that's it? That's it! For fun, I've added in a custom click event in my Goals to track when a visitor clicks on the banner ad, but it's more just for fun since we don't have a control variant to which to compare it. To run your lovely new banner ad, click "Start Experiment" in the top-right corner, and if all goes well, it'll now appear on your site for all the world to see!

While this was all fun and good, I'm sure there are many steps or things I did that may be confusing, so please leave your feedback in the comments. Additionally, in future blog posts I'll talk about some more advanced ways we've been using Optimizely including segmenting traffic and persisting changes for visitors from referral links and also how we're using WebTranslateIt as a quick-and-dirty static page generator and content management system.