Programming For Non-Programmer Affiliates, pt 2: Letting Your Lander Make Decisions (17)
Programming For Non-Programmer Affiliates, pt 2: Letting Your Lander Make Decisions
Welcome back to this death-defying, heart-pounding race through basic programming for affiliates!
Well, OK, I may be selling it a bit hard there - but seriously, welcome back to Part 2 of the STM tutorial on programming for affiliates who couldn't already program! It's an incredibly useful tool, and one we'll be taking maximum advantage of in this series to make your landing pages sit up and beg.
If you missed Part 1, you can find it here, including details of why you should learn to program as an affiliate, setup for this tutorial, and much more.
Today, we're going to take the basic code we put together in part 1, and extend it to do all sorts of things - including displaying customised images on your lander depending on the characteristics of your incoming visitors, reacting to user input, and more.
But first, we need to learn about one quick but extremely useful feature of Javascript: Variables.
Variables: For When You Absolutely, Positively Don't Want To Type The Same Thing 25 Times
One of the most powerful elements of any programming language is its ability to remember things.
In Part 1 of this tutorial, we used code to pull in text ("Strings", if you remember that) from the URL, and combined that with other text in lines like this:
But what if we want to use that message in a few places (say, in the alert box AND in the text, and maybe again in an exit pop)? Do we have to use that same code each time?
No we don't. We can just take the message, and store it in a variable. Variables are containers for any data we want to use again and again in a program - like a virtual briefcase we can throw information into.
Creating a variable is super-simple. All you do is name it, and put the value you want to store in it after an equals sign. Add this line of code to the end of your lander from last week to store a message in the phonemessage variable:
Once we've done this, we can use that message whenever we want - which also makes our code easier to read. For example, after that line we could then write
and we'd get the same result as in our original code. Note that we don't need to put phonemessage in inverted commas - "" - as it's not a string of text, but something that contains that string.
Try that now with your landing page!
IF Statements - Letting Your Lander Make Choices For You
So, let's get back to our coding. We had successfully persuaded our lander to show the operating system of our phone - but there's a problem.
What if we don't just want to say "IOS" when we see an Apple product, but instead say "Apple iOS"? Or "Apple's Operating System"?
Well, that's where an IF statement comes in. IF statements allow your program to make decisions based on what happens when a visitor arrives - and those decisions can be unique for each visitor. They're an incredibly powerful tool.
And they work just as you'd expect. You define a condition - "the phone's OS is listed as "IOS"", for example. And IF that condition is true, then some code is executed - otherwise, it isn't.
Taking our previous lander (final code here), let's make a couple of modifications.
Firstly, let's split the line which detects the Operating System into two lines, to use Variables (as above). You'll see why in a moment.
Replace
with
phoneos = getParameterByName("operatingsystem");
document.getElementById('operatingsystem').innerHTML = phoneos;
Try and figure it out yourself - move on when you think you have an answer, or if you can't figure it out.
...
...
OK! The two lines do two things:
1) The first line gets the "operatingsystem" value from the URL, and stores it in the variable phoneos.
2) The second line retrieves what's stored in the variable phoneos, and changes the inner HTML of the "operatingsystem" element to match that.
So far, it seems like we've just made our code more complicated. But now we add an IF statement, after the first line and before the second. Here's the IF statement:
and here's where it should go in the code:
phoneos = getParameterByName("operatingsystem");
if ( phoneos == "IOS" ) { phoneos = "Apple iOS"; }
document.getElementById('operatingsystem').innerHTML = phoneos;
- IF command: Starts this entire process off, just like calling a function. However, IF statements do NOT need to have a semicolon after they close - the closing } (curly bracket) is the end of the IF statement.
- Condition: The things inside the brackets after "if" are the things that the program will check. If the condition is true, then the code in the curly brackets will be executed.
- Comparator: We can use a wide variety of comparison symbols here - here's the full list - but here we're using the simplest one, checking if the two values are equal. Note that we use "==" to CHECK if something is equal, and "=" to SET something to be equal. This is a very common mistake to make when you're coding! If we wanted to check whether something was not equal, instead, we'd use "!=".
- Code To Be Executed If True: Everything within the curly brackets will be executed if our lander detects that the Operating System is set to "IOS". What this code does is set the value of the phoneos variable AGAIN - in other words, it changes it from "IOS" to "Apple IOS", which is what we want. That's why we used a variable here - it means we can change the message after we set it, depending on what happens. This code DOES need a semicolon at the end of each line.
Fire up your Google Developer Tools or go to your lander on your iPhone or iPad after adding this code, and you'll see that the lander now detects your Operating System as "Apple IOS" rather than just "IOS".
It's a small change, but one that opens up very powerful possibilities.
Changing Images To Match Your User
Here's one really powerful use of the "IF" statement: customising your landing page to match something about your user.
For example, let's say you want to match the image on your lander with something about your user. This is a really powerful tool:
- You can personalise images based on what you know about the user - for example, showing an iPhone or an Android phone (or even their specific model of phone) depending on what they use.
- You can use geolocation to make it seem like the ad's targeted exactly for them - showing pictures of New York to people in New York and pictures of LA to people in LA, for example.
- You can match the image in your ad with the image in your lander. That's particularly powerful if you're running dating, adult, or something else where your users are clicking on pictures of people.
In this case, we're just going to show a different image for people arriving on iPhone or Android, plus a default one for anyone else who shows up.
First, we'll need a couple of good phone images. Hit up Google Image Search and grab a good image of an iPhone (save as "apple.jpg"), an image of an Android phone (save as "android.jpg") and an image of something else - a Blackberry, say (save as "other.jpg").
Upload all those images to your server in the same directory as your landing page.
Now we need to extend our IF statement to cater for more than one choice. In this case, we've got three choices: Android, iOS or Something Else.
Fortunately, that's easy to do with an IF statement: if there's another possibility, we just put "else", then another IF statement.
And if we want a default "catch-all" statement at the end, we just put "else", then the code that should be executed if nothing else is true.
Here's that code in action. Replace your single-line IF statement with the code below:
if ( phoneos == "IOS" ) { phoneimage = "apple.jpg" ;}
else if ( phoneos == "Android" ) { phoneimage = "android.jpg"; }
else {phoneimage = "other.jpg"; }
Now, all we need to do is change our text into an image. This is what's so powerful about Javascript: it doesn't just change text on a page, it can totally change everything about a page's HTML, from writing new tags (as we're doing here) to changing styles, replacing or adding in new layout elements - anything!
To turn our text into an image, we just change the inner HTML of our span. Replace the line starting "document.getElementById" with:
Careful with that code - it uses single quotes - ' - not double-quotes - " - to enclose each of the strings. That's because the strings contain double-quotes themselves - if we were to use a double-quote to surround the strings, Javascript wouldn't know what double-quotes were part of the strings, and what were meant to be INSIDE the string. So if we need to use a string with double quotes in it, we use single quotes around it.
Now visit your page again - you'll see the text is now replaced by an image! Try it a few times with different phone models or different emulated models in Chrome - you'll see you get a different image every time!
What next?
In the next and final part of the tutorial (for now - it may continue later!) we'll discuss having users interact with your code, triggering elements on click, hiding and showing elements, and more.
As with last week, if you've had any problems following this tutorial, don't worry! The mistake is probably mine, not yours: programming is notoriously difficult to teach! Let me know what part you got stuck on, below, and I'll help you get past it and update this tutorial to help future readers!
If you did get through the entire tutorial, here are a few follow-up questions to test programming skill with these new elements:
- How would you replace images to match the images in your ads? Hint: you'll need to assign each image a number, and then pass that number from your traffic source to your lander.
- IF statements can get pretty cumbersome - if you're doing a lot of replacements (like one for each state in the US) you'll probably want to use a SWITCH statement instead. Can you reimplement this code using SWITCH rather than IF?
- What if you want to do both - have some custom text AND have a custom image? Can you see how to do that without using a second IF statement?
See you next time for Part 3!
Thanks for the awesome post! I've been trying to learn Javascript for some time, and this seems like an excellent primer!
Thanks Hugh! Your tips are so practical and SO cool - I'm going to implement some of these on my new batch of landers! 
For other coding newbies: I just finished the jQuery tutorial over at Codeacademy - it's short (estimated time = 3 hours if you do it slow) but oh so useful! Not as cool as Caurmen's tutorials but will provide a good basic foundation for anyone new to javascript/jquery. Codeacademy also has tutorials for HTML/CSS, javascript, php, python and ruby if anyone's interested.
http://www.codecademy.com/en/tracks/jquery
After finishing that tutorial @ codecademy.com, the in-depth tutorials @ w3schools would be a great next-step to further your learning:
http://www.w3schools.com/jquery/default.asp
http://www.w3schools.com/jquerymobile/default.asp
And just like codecademy, w3schools has lots of tutorials in other programming languages as well. Have fun!
Amy
@vortex - Yes, I couldn't agree more about CodeAcademy. It works. I used it to brush up my Javascript some time ago, and I've had one of my employees go through their PHP course, after which he was able to go from complete non-programmer to developing useful scripts for me.
If you want to know more after finishing these tutorials, definitely run, do not walk to CodeAcademy.
I'd also strongly recommend their Ruby course - Ruby's the language I use to do most of the scripting I talked about at STM London. http://www.codecademy.com/tracks/ruby
Having just read this, I had this grand idea of having basically only 1 lander. And then passing all these different variables in order to change the look/feel/content of the lander. But then how would you track which combination of variables is performing best? Also is there a way to split test with this method?
For instance say an Android user lands on your page. Can you program it to randomly choose between 2 Android photos? How could you track at that point?
I'd caution against getting too grand with this system - certainly I'd still recommend going for one lander per offer. Data management starts to become a huge overhead, and it's a total pain to change some things (like complete design changes) using Javascript alone. You're better off having a seperate lander there.
Having said that, if you know what lander design sells, and you're only selling one offer, you can get pretty impressively large sets of lander changes going. I know one guy who has over 900 tailored landers for a single offer - each lander's tailored to a particular Adwords keyword.
The best way to split-test variations is to pull ALL variations from the GET data in the URL, and then set up different landers within your tracker for different variations. That might sound a bit complex, so let me take your example and explain how I'd do it.
If I wanted to set up two different images for Android and then switch between them, I'd set up two landers in my tracker for Android, with the following URLs:
- http://www.myserver.com/lander1.html...image=android1
- http://www.myserver.com/lander1.html...image=android2
Then I'd just set my lander up to pull the "androidimage" GET parameter and use that plus ".jpg" as the "src" element of my image -
androidimage= getParameterByName("androidimage");
phoneos = getParameterByName("operatingsystem");
if ( phoneos == "IOS" ) { phoneimage = "apple.jpg" ;}
else if ( phoneos == "Android" ) { phoneimage = androidimage + ".jpg"; }
else {phoneimage = "other.jpg"; }
That makes perfect sense. And it's a lot simpler than what I was expecting. Going to try implementing something along these lines now. Thanks!
Can I have the final code for this as well? i don't seem to get the image to load
Hey, Thanks for this tutorial!
This sounds to be very effective when building landing pages around targets instead of offers, so that I can change the background-image, <title>, sound or colors to better match the target domain.
Could you please provide a simple example of how to change the background (CSS is inside index.html) and <title> depending on www.domain.com/?target=XXX ??
<title>???</title>
<style>
body{background:url(???)}
</style>
Thanks
Here's Part 3 for anyone trying to follow along.
Is there any reason this code won't execute more than once on the same page in the HTML?
I'm using the span tag to execute
<span id="operatingsystem"></span>
However, when I execute it 2 times, only the first instance on the page will run. If I comment that span out, the second will run
Any hints?
P.s. Im not inserting an image, just using the code to pass the parameter in a few spots on the page..
JS assumes IDs are unique on a page, because HTML specifies they should be. As such, it will only work on the first one.
To make this work, you can do two things:
1) Rename the second instance and run a line of code for each ID.
2) Use getElementsByClassName instead, and then loop through the elements.
The second one is cleaner, the first one is probably simpler unless you plan to have more than two of these elements.
Hope that helps!
Thanks Caurmen - I knew ID's where unique but had no idea that JS would only run once for the first ID,
Classes it is
Hi Caurmen,
The final code to display image does not work well for me though I copy your code and do nothing else.
Here is how it looks when I open the page in Windows, and IOS also
Just think that the problem can possibly be from the image files. But I check them already, and they are in right format.
I wonder is there another thing to check when it does not work ?
Tien
@deetei - did you add the "?model=iPhone5" parameter to the end of the lander URL, as mentioned in Part 1 of the tutorial? That should make it work.
After fiddling around with the image section of the tutorial, the final code that worked for me was this:
phoneos = getParameterByName("operatingsystem");
if ( phoneos == "MacOS" ) { phoneimage = "apple.jpg" ;}
else if ( phoneos == "Android" ) { phoneimage = "android.jpg"; }
else {phoneimage = "other.jpg"; }
document.getElementById('operatingsystem').innerHT ML = '<img src="' + phoneimage + '">' ;
Hope this helps someone!
(not sure why vBulletin keeps putting a space between HT and ML!)
And yeah vbulletin has glitches - whenever you post anything that doesn't have a space (like a link, or code), it would just add them. Hella annoying. This is why sometimes in tutorials I need to include a note that says "the space between x and y is a vbulletin glitch - please take it out before pasting the link.
Another way to avoid this problem is by pasting the code into pastebin or similar, then posting the link to that here.
Amy
Home > Technical & Creative Skills > Programming, Servers & Scripts