How to start with Optimizely (mind blowingly easy)

When I first started researching digital marketing and testing conversion rates, I heard of Optimizely.  I glanced at it briefly but it wasn’t until I tried it out that I saw how amazing it was.  I almost feel that they need to sell it better on that front page because it certainly doesn’t show how amazing and simple it is.  Getting started with AB/variance testing with Optimizely is amazingly simple.

What you will need

  • A landing page
  • Access to your landing page’s code
  • Optimizely account (free)

First step is to create a free Optimizely account.  It’s free for the starter plan and it’s already a very powerful plan.  Once you’re in, you’re going to create an experiment.  Most important part here is to make sure to give it the url that you have access to since you’ll need to insert JS code in that page

.optimizely_first

Now we get to the fun part.  Optimizely can do a lot.  The two things we’ll touch on here are making a slight page variance and testing two completely different landing pages.  Both are super easy.

Making a slight page variance

So, we start with our page.  It’s going to be a pretty standard landing page.  It’s for an insurance company that, naturally, wants to get as many quotes as possible, to “QUOTE” is the predominant call to action.  However, the quote form is very in-depth, understandably.  I have suspicions that maybe a big phone number might lead to more quotes because they want to talk to someone and not have to fill out a form that may or may not work.

optimizely_two

I want to swap that primary call to action with a phone number.  So, I click it, “Edit element” > “Edit HTML” and then make the necessary changes to my elemenoptimizely_threet (replacing the text with the number I want them to a call (a google voice forwarding number, of course, so I can track which calls come from our change).  It’s that easy!

Behold!  Now we have a variance with our phone number!  (And, if you need commercial insurance, call that number.  They’re good people).   So you can go ahead and create new HTML elements, move around current ones, or whatever you’d like to test.  It seriously is that easy.  It’ll create it all with this variance (or whatever variances you’d like) and then split test them for you.

Notice at the top it says “Original” and “Variance #1”.  Let’s look at the awesome options we get up there.  See “Redirect to a new page”?  That’s a way to test a completely different landing page to see which converts better.  You’d need to be able access that site’s code as well to insert the javascript snippet so you can track the events on both.optimizely_four

So, now let’s put this test into action!  Click the “Start Experiment” button in the top right and an overlay will appear with your javascript snippet.  Just make sure to insert that snippet into your page and you are good to go!  By default it’ll allocate the traffic at a 50/50 split but you can edit this as you see fit.

There!  I told you getting started with Optimizely was easy!  Now you can easily split test any variance or different landing page with ease.

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

Two things every new website needs (Google Analytics with goals)

GA_realtime

So you’ve got a shiny new website.  And whether you’re trying to sell, get information about your business out there, or just get more viewers on your blog, you want to be able to see how many are visiting your site and if they are taking the desired actions that you want.

If your main goal is to sell products but no one is viewing your store/products, that means something is probably wrong either with your site design or the traffic you are getting isn’t the traffic that you are wanting.  To be able to see this, we need google analytics installed and we need to set up some goals within google analytics.  Once I set it up, I loved watching the real time feed.  I still love it.  People were looking at something I set up!

GA_realtime
Best feeling ever

Google Analytics

Now let’s get it set up!  Go set up an account with Google Analytics (very simple).  From there you’ll be provided with a Tracking ID and some javascript.  If you’re using WordPress, all you need is that Tracking ID.  For my WordPress sites I use Google Analytics by Yoast.  Easiest way to find it is probably through the WordPress Plugins.  Once installed, just go to settings and either enter your Tracking ID manually or authenticate with your google account.

If you’re not using WordPress, simple copy the javascript and put it somewhere in your layout (hopefully you have some sort of framework with a layout).  If you don’t have a layout, it would need to be on every page you need tracked.

GA_tracking

GA_realtime

I always confirm that it’s working by opening an incognito window and visiting the site.  From Google Analytics go to the Reporting tab at the top and then Real-Time, Overview.  Within a minute or two (at most) you should see an active user on your site (you)!

 

Google Analytics Goals

I really feel that setting up Google Analytics goals is one of the most overlooked but most important steps of setting up great analytics.  Like it is essential.  When you create your website, you generally have a goal in mind and this needs to be tracked so we can test and improve.

Simplest things to track are pages.  If you want people to go to your contact page or you have an “order complete!” page, then you’d definitely want to have a goal for this.  In fact, if you have a cart, I’d recommend tracking the pages where people add something to a cart so you can see how many are creating carts and how many of those are bouncing and where so you know what part of your flow you need to improve.

Go to the Admin tab in Google Analytics and select “Goals” from the “View” column.  You’ll then create a new goal.  There are three steps here and for the first whether you pick a template or custom really makes no difference.  Just pick one, go to step two and change the goal name. Typically “Destination” or “Event” are the type of google analytics goals that I track.

For now, let’s go with “Destination”.  Then on step three GA_goalwe’ll choose the destination that will count as “accomplishing” the goal (client going to our contact page or our “order successful!” page).  Remember that you’ll just want the end of the URL and not the domain name, as seen in my picture.  I generally always change it to “Begins with” in case of query string parameters.  Then we “Create Goal” and we are done!  Yay!  Now we can start to track how many people are going to our goals AND from what source are the people going to our goals.

This is VERY important if you are doing any kind of SEO or PPC work.  You could be getting (and paying for!) a hundred clicks a day but if you don’t have goals set up, you will not be able to know whether any of those clicks were the ones converting (whether that conversion be a sale or just request a quote).  If they aren’t converting, we really don’t want to pay for those clicks.

For example, go back to your “Reporting” Tab, then Acquisition, All Traffic, Source/Medium.  As you can see from my picture, the people that are converting are NOT from my adwords campaigns.  This means that after a little more testing, I will either change my ad or just stop it altogether.

soruce_medium_conversions

I wanted to leave one final note that Events are also very helpful for using for goal creation.  You can track any click (or any event) that happens and then report that to Google Analytics.  It’s fairly simple JS and if you need help implementing it please drop me a line and I’ll be more than happy.  If you are using WordPress and GravityForms a very simple (but awesome) Plugin is Gravity Forms Google Analytics Event Tracking.  With it, you can simply add which part of the form you want to trigger which event.  Again, I’m not going to go into it in detail but if need help at all, feel free to reach out.

Want to learn more?  Subscribe below!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

 

Proverbial Blisters – Getting your code on the web

Proverbial Blisters

When I learned to code even the tiniest bit of html I felt awesome.  Coding is like magic to me.  I type in what I want and it makes it happen.  I love it.

As I got better, however, I noticed that I was getting very good at one part of building websites but still knew next to nothing about another, very important part.  And that was the actual deployment of the website.  I didn’t know how to get my code out into the actual world wide web outside of my corporate environment, where I hit shift+u and dreamweaver made it happen.

I am, frankly, still kind of embarrassed by this.  I’m not sure but I think it’s probably a fairly normal thing for programmers to not necessarily be familiar with the web hosting side of things.  Not knowing how to do this felt as bad as the blisters that I got from running in the outfit shown in the picture above.

So, I’m going to talk about three ways to throw your code up on the internet so everyone can appreciate your coding ninja skills.  Here they are:

CPanel File Manager (easiest)

Things needed: Webhost (godaddy, namecheap, bluehost, me)

The host I work with (namecheapand a lot of other hosts provide a control panel aptly named…cpanel.  Whether it’s cpanel or something else, all the normal ones will provide some way to access your files.  This makes it immensely easy to throw your code up there.

You just click File Manager as shown in the picture here and it will take you to your files.  Below I talk more about where to put your code but it’s set up pretty simply and you just upload your code and then see it live!  This method makes it a little slower than the FTP method below because you can’t really mass upload/download.

Cpanel

Basic FTP (easy)

Things needed: Webhost (godaddy, namecheap, bluehost, me), FTP software

Any web host will provide you with some sort of ftp credentials.  With these credentials you can access your code using some sort of (free) software.  I use FileZilla (I’d use the additional download options to avoid bloatware).  The credentials will generally include a domain name, username, and password.  I’ve included a picture of what filezilla looks like.  On your left you have your local code and on your right you have your server code.

FileZilla

Where to put your code

This applies to any method for most webservers.  Most php servers will generally have a public_html or something like that where your front side code will reside.  If you want to test to make sure it works (and why wouldn’t you??) just make a simple index.html and put it in the public_html directory.  The web server will by default open index.html at your home level (aarmora.com will show /public_html/index.html unless we tell it otherwise).  It also responds to standard file structure.  /public_html/pizzaMcFace/ilovepizza.html can be seen by navigating to aarmora.com/pizzaMcFace/ilovepizza.html.  And I do love pizza.

Firebase (harder, more fun, free!)

Things needed: Nodejs, firebase account, fingers (or anything with which you can type)

I love this because you can put your code out there for anyone to see without owning a domain or paying for a webhost.  Before I had a stable webhost, I would often use this to show clients previews of work I was doing because it was just so fast and easy.

Seriously don’t be intimidated by node and firebase for this method.  We are just using the node package manager and just the hosting of firebase.

So, first, download nodejs for your appropriate OS and install it.  It is very straight forward.  A few accepts and nexts and you’re done.  This will install a command prompt that is set up for using nodejs.

Now let’s make a Firebase account.  Once you have it open you can create a new app from your dashboard.  The app url you choose here will give you your Firebase hosting url.

Firebase dashboard

 

With that account and app created, we find the nodejs command prompt that Node installs for us and download the Firebase deploy software (firebase’s guide can be found here) by just typing npm install -g firebase -tools at the command prompt.  After this, you’ll want to change the directory to where you code lives.  As seen in the picture below, mine is at c:/sites/tester, where I have an index.html file.

From there, I start the Firebase magic and simplicity.  We just type in firebase init and it’ll probably have you sign in and then confirm which app you want to use (just type in the app’s name).  It’ll ask you what the public directory should be and you should just hit enter to confirm that you want to use the current directory.  It’ll set you up and then it’s just firebase deploy and you will be live!  My index.html file had some pretty complex code, or “hey dudes”, as you can see on my live app!

Firebase from console

 

So, there are three simple ways to get your code on the internet so you can show you spouse, best friends, and mom.  You have now contributed to part of the world wide web!

Want more great information?  Subscribe below!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.