Today I’m going to take you through a really brief walk through and introduction of Optimizely-CLI.
We found as we built out the CLI, which stands for Command Line Interface, that being able to do a lot of the test development and debugging locally on our own machines was actually much faster. Optimizely-CLI allows you to do that, and then when you’re ready to push it up to Optimizely, you use the Optimizely API to push your test up.
You certainly do have to do a lot of the final tweaking and edits and QA directly in Optimizely, but the largest component of tests, especially more complex tests, not just changing around a word or two or a color but tests that are significantly more involved, is writing the code and is developing it. So, hopefully, if you’re a developer writing Optimizely tests, this can have value for you.
So, let’s get into it. I’m going to skip past the installation of the optcli itself. It’s pretty straightforward. It is built on Node, so you’re going to have to have Node installed locally. It’s delivered as an NPM package, so you’re going to have do an NPM install of Optimizely-CLI. Documentation is on our page, so feel free to take a look.
Once you have installed Optimizely-CLI, what you’ll want to do is create a new directory for your project. You’ll see that this one here is empty. The first thing you’ll want to do is initialize your project. The optcli init command is the one you’ll want to use for that, and you need to specify your project ID. The easiest way to find that is to head over to Optimizely and your project and go to the project settings tab, where under snippet implementation you will see your project ID.
Now, if I look at it, optcli has created a project.json file. An empty project is, obviously, not very useful, so we want to create our first experiment. Let’s say we wanted to do a headline test on the FunnelEnvy home page. To do that, you’ll want to use the optcli experiment command which takes several arguments including the directory that you want to create the experiment in, the description of the experiment, that’s what’s going to show up in Optimizely in the dashboard and in several other places, as well as the default editor URL.
When you open it up in Optimizely, this is the page that will open. You’ll see that it has created the folder and in there is the experiment.json file that describes the experiment.
Next up, we’ll want to create a variation within that experiment. To do that, we’ll use the optcli variation command, which in a similar way takes the folder name of the experiment, the folder name of the variation, as well as the variation description.
Next, we’re going to want to style that, and so we can add some CSS right in the global CSS. Keep in mind that, just as with Optimizely, the global CSS will take effect for every variation. So, let’s make the font bold. Save that.
Let’s take a look at what that looks like. The way to start the local server is to use the optcli host command and specify the path to the variation. By default, optcli uses port 8080. You can change that using the command line argument. And, by default, it serves over HTTP. You can also specify minus S for SSL if you are testing on HTTPS pages. If you point your browser to the URL from the console output, you’ll see that Optimizely-CLI has some instructions as well as some status and URLs for you.
On the left hand side, there are some one time setup steps. You only need to do this once, the first time you do the local hosting and script injection with Optimizely-CLI. And on the right, you’ll see the currently served experiment and variation as well as URLs to be able to view the variation on the editor URL that you specified in the experiment.
The script injection does require either the Tampermonkey Chrome extension, if you’re on a Chrome browser, or the Greasemonkey Firefox add on. In this case, I’m on Chrome, and I have installed the Chrome extension already. So, I’ll skip ahead to step two.
Now, Tampermonkey is installed on my browser. The injection script is running. I can now actually view the variation that I created. If you take a closer look at that script, optcli uses the optcli activate parameter to determine whether or not to inject the script. So, you can actually run your variation script on any URL just by appending this parameter.
This lets you iterate really rapidly because you are doing it locally and then can therefore move a lot faster and get your code right. Let’s say I am happy with my code for the variation now and I want to send it up to Optimizely. Go back to the command line. We can stop the local server and run the optcli push experiment. It’s important to remember that you need to have pushed the experiment before you can push any of the variations underneath it. To push a variation, you just push experiment and specify the directory of the experiment.
If you haven’t entered your Optimizely API token, you’ll need to do so now. You only need to do this once on a project. It will store this locally. I’m going to enter my token now.
So, the token’s been set, and it has created a remote experiment in Optimizely. So, let’s head back over to Optimizely. Looking at the dashboard, refreshing the page, and I can see the headline test has been created. Let me push up the variation now that I created. To do that, you use the optcli push variation command specifying the path to the variation which is obviously underneath the experiment locally. And I didn’t need to enter my token, because I’ve entered it once and you can see that the variation has been created.
One final note on both the push experiment and push variation command. You can run these multiple times. The first time for both it’ll create either an experiment or a variation. But, if you make some local changes and run it again, it will actually update the code for those variations.
That’s how you can keep your local code in sync with what’s in Optimizely. So, if I go take a look in Optimizely, you’ll see that the headline test one experiment has been created as well as the change headline variation. By default, Optimizely will create a variation number one. You can remove that if you choose.
I hope you enjoyed this brief introduction to Optimizely-CLI. There are several other features there that I haven’t mentioned, so certainly feel free to give it a spin. If you have any feedback, we’d love to hear it. Feel free to submit issues or, better yet, put requests on the GitHub page. Thank you.