Simple Code for AB Testing Affiliate Recommendations in a WordPress Sidebar HTML Widget

Javascript, WordPress, Your Affiliate Program’s Campaign Link

The Story

When I created Yagisanatode.com my goal was to provide a resource for myself and others to reference on all the coding projects I work on. Since it’s beginnings in October 2017 I have seen a huge rise in my readership and am so pleased to see a growing community in my comments sections. 

Your support has really helped me to produce more and, I hope, produce better content. Thanks.

 

Just take me to the code!!!

 

Another goal of this site was for me to find a way to do something on the site to earn enough money to pay for my web hosting without being a jerk and blasting you with advertising you don’t read, find distracting and most of all find patronizing. 

I thought, If I’m going to advertise on my website, it better bloody well add value to my readership, be a product I use and trust, and meet my own personal standard of ethics.

Tough call right? I’m advertising something after all.

So, after spending the last few weeks going over options in my head and researching the best way to not be a jerk and offer you something that will add value to my website. I found that an affiliate program might bet the best option. 

Eee! Gaah! An affiliate program! Now you’re flat out lying to me Yagi!!!

No. But I agree, those affiliate programs have a nasty reputation, and quite rightly so in 99% of the cases. 

So here I was trying to find an ethical affiliate program, one I could use myself and stand behind, when a few days ago, it dawned on me.

When I was looking for a web host for my website I wanted a host that was as environmentally conscious as possible. I’m not going to go into the pitch here – this is a tutorial after all. Long story short, I chose GreenGeeks (The info is in the sidebar if you are interested).

So, I think I have something I can offer my readers that I stand behind, use and trust. Plus web hosting is relevant to the geeky things I post about here like coding.

AB Testing – A way to find the best message for my readers. 

I didn’t just want to slap an ugly ad on my sidebar. I wanted to share a bit on why I thought that GreenGeeks was such a good option for web hosting. 

The thing is, I really don’t know what the best the way is to get across, in the most honest, sincere and appealing way, my reasons for recommending the web host. So I decided to take a leaf out of the book of marketers and do some AB Testing. 

AB Testing is a really simple strategy. You write two versions (copies) of what you want to say and then see which version produces the most views and sales. After a month or two of testing, you look at your data and pick the best one. You then go back and write up another version and AB Test that and compare it with your current best version. Repeat until you get the best results.

So how do you get all this data to compare version A with version B?

When you join an affiliate program, you will get a URL link that you can add to images or text that the user can click on to go to check out whatever you are recommending. Here’s my link for GreenGeeks:

https://www.greengeeks.com/track/burpwind

This will track all the clicks and numbers of sales you will get in your account. The Amazon Affiliate Program, like many others, has the same thing. 

Most of these affiliate programs also have something they call campaign links.  These are links with and extra id that you can put into a particular campaign and then another link into another campaign. They will record clicks and purchases for each campaign. You can use this data to determine which one is performing the best.

Essentially then, my AB Test would be two campaigns. As such, I created two campaigns in my GreenGeeks affiliate dashboard. One for Version A and one for Version B of what I want to say:

Version A: https://www.greengeeks.com/track/burpwind/cp-a1515

Version B: https://www.greengeeks.com/track/burpwind/cp-b1616

As a bonus, my affiliate provides a nifty little image for the user to click on to go to their website. You can see it in the sidebar. 

The Two Versions to Promote my GreenGeeks Affiliate Link

Now I had the two campaign links it was time to create the two version of what I wanted to say to endorse my affiliate link. My two versions are below. 

Version A

When I decided to create this website, I wanted a green solution to website hosting. Let me tell you, green web hosts are few and far between. They are either too expensive or not really eco-friendly once you get under the hood. It was a pretty damn frustrating search until I found GreenGeeks.

Green Geeks is an Eco-Friendly WebHost committed to energy-efficient hardware, renewable energy and their involvement in Green initiatives. All at competitive prices.

This makes them a web host I can actually trust and recommend to my readers and friends.

If you are looking for a web host, please consider GreenGeeks and click the affiliate link below. It’s a win-win. I get a little money to pay for the cost of running this website and you get to join to revolution in Eco-Friendly web hosting. Click on the image to find out more:

~Yagi.

 

Version B

I care about our environment. That’s why I’ve hosted my site with GreenGeeks. It’s competitively priced and takes an eco-friendly approach to web hosting. It’s a product I can recommend with sincerity

If you are in the market for a web host, please consider GreenGeeks and click the affiliate link below. It’s a win-win.I get a little money to pay for the cost of running this website and you get to join to revolution in Eco-Friendly web hosting. Click on the image to find out more:

~Yagi.

I don’t know how good they are. I’m not a marketer. However, the good thing about AB Testing is that you can refine it after you test it and keep AB Testing until you get it right. 

So Where do you put the Versions on you WordPress Site?

You can see now that I have put the affiliate link recommendation in the sidebar – Go have a look. I really didn’t want it to be too distracting, but I also wanted it to be seen on each page without having to physically add it to each post.

Custom HTML Widget to the Rescue

Fortunately, WordPress has a Custom HTML widget that you can add to the sidebar of your page if you have a two or more column page. Inside the Custom HTML, you can add HTML, Javascript and CSS.

But How Do I Only Display One of My Versions At a Time?

So adding my two versions is pretty straight forward. Copy and paste the HTML in and there you go. 

Well… except you will be displaying both versions.

Let’s fix this up by randomly displaying only one version each time the page loads with a little bit of code: 

The Code: 

 

In the script above I have created two div‘s one with the id, “testA" (Line 1) and one with the id, "testB" Line 18).  Inside each div is my recommendation and the GreenGeek image with an affiliate link to their website.

Let’s take a look inside the <script> tags.

On line 28 we’ll call the function randAB and put it in the variable randChoice. 

randAB creates a random number that will either be 1 or 0 (Line 34). 

On line 37, if the randNum equates to one then our choice should  be "testA" otherwise, we should use "testB".

Our choice is then returned and becomes the value for randChoice back on line 28. 

On line 29, we then let the variable aORb look for our div id that is equal to the randomly returned choice in randChoice.

Finally, on line 30, we set that div to not be displayed. 

So, for example, if 1 is randomly selected it will return the div "testA" which will not be displayed on the page. Only displaying "testB"

Adding the Code to the WordPress Custom HTML Widget. 

Now you have the code, go back to the Custom HTML widget and paste in the code and save. 

Now go back to your website’s homepage and refresh. If you refresh a couple of times you will see that the affiliate recommendation changes to the "Atest" to the "Btest".

You can see here that the different affiliate recommendation versions do not appear at an alternate equal interval. Rather they appear randomly. 

WordPress AB Test Template. 

So if you have made it this far or just skipped down to this bit, you will see the template below. Add one version inside the <div id="Atest"></div> and one inside the <div id="Btest"></div>. Make sure you use HTML to create your text weights, formatting and links.

 

Now that you have the ability to AB test on your WordPress sidebar, go ahead and give it a go. Just remember, your audience is people. You should care about them and treat them with dignity. So think carefully before you make your decision to advertise on your site. 

Good luck!

~Yagi.

P.S. So what do you think? A version or B versions? Or can you think of something better?