Programming For Non-Programmer Affiliates, pt 1: Echoing Tracking Parameters (35)
Programming For Non-Programmer Affiliates, pt 1: Echoing Tracking Parameters
OK. It's time.
Time to tackle one of the questions that we get most frequently, and one of the things that many affiliates fear, struggle with, or just plain avoid like hell.
How to learn to program.
This is the first in a series of tutorials that will teach you the basics of programming in Javascript. You won't be ready to code the next Call Of Duty, but you'll know some tricks that will serve you for your entire career as an affiliate, or indeed any other computer-based career!
In this first tutorial, I'm going to take you through a very common and very useful bit of coding: how to show the operating system, country, phone model or anything else that your visitor is using. We're going to do that by forwarding the information our tracker detects on to our landing page, then using code on our landing page to customise it for each visitor. This is a pretty reliable way of boosting engagement with your landers.
But rather than just dumping a pile of code on you and saying "copy-paste that!" I'm going to go through it and explain what it does, and how you'd modify it if you need to.
Why Should You Learn To Program?
But why? It's easy to outsource to programmers on oDesk - why learn it yourself?
Firstly, a lot of simple programming tasks are quicker to do than they are to outsource. The one we're working on in this tutorial is one of them: it'll take you about the same amount of time to describe the task, post an ad, and select a programmer as it will to follow through this tutorial yourself. Even if you're not planning to learn complex tasks, knowing enough to be able to drop in and modify simple "recipes" will actually save you time over outsourcing those same recipes.
Having a basic knowledge of coding will also give you the ability to make minor changes to scripts you have already outsourced, even if those scripts are too complex to write yourself. For example, if you've had a script for a questions lander outsourced, and want to change the speed of one of the transitions between questions, if you know the basics of programming you can change that detail in three minutes. If you need to send it back to a programmer to get it changed it could well take you three days instead!
In addition, even a basic knowledge of coding will help you with outsourcing more complex tasks. From evaluating a programmer's skill to estimating what tasks are doable in what time, it's a very useful skill to have even if you're subsequently going to outsource most of your programming requirements.
And finally, and perhaps most powerfully, learning to code will help you come up with ideas. That's something you can't outsource - knowing what options coding can open up to you. Even knowing the basics of what functionality coding can add to your campaigns means that you don't just have to go by what you've seen other people do. Instead, you'll start to see possibilities to use code to enhance your campaigns in ways that you wouldn't have considered before.
I'm absolutely not saying you have to be able to code in order to be a successful affiliate. Plenty of super-affiliates don't know Java-the-language from Java-the-coffee. If it's something that makes you feel like your brain is melting out of your ears, you may be better training your strengths instead.
But if you've never tried to learn to code, it's a useful skill to add to your arsenal.
What Do You Need For This Tutorial?
You'll need a knowledge of HTML and CSS sufficient to code or modify basic landers.
You absolutely don't need to know any code - but by the end of this tutorial you'll have some of that skill too!
You don't need any special tools for this tutorial. Just like HTML, you can write most programming languages, including Javascript (which we'll use here) in a text editor.
Setup
OK, first things first, we need to do some non-programming tasks.
If you don't have a lander you're planning to use this on, create an HTML page on your server, accessible from the Web, with the following HTML code:
<head> <title>Parameter Passing Test</title> </head> <body> <h1>Your tracker believes that your Operating System is:</h1> <p id="operatingsystem">No Idea</p> </body>
If you do have a lander that you want to modify to show some elements passed from your tracker, write some placeholder text where you want the element to appear, and enclose it in a <span> with an id named after the thing you want to display. So, for example, if you're planning to echo the Operating System:
Next, create a dummy campaign in your tracker which passes the information you want to pass to your landing page via a query string. (If you don't know what a query string is, have a read of my tracking guide, which explains how they work).
How you do this varies by tracker. For
1)Hit "Edit Lander" on your landing page.
2)In the "URL" section, add a "?" symbol after the URL you have there already. Then add the name of the parameter you want to track, as a single word with no spaces - "operatingsystem", for example. Then, add an equals sign: "=".
3)Finally, hit the button in the
You should end up with a landing page URL that looks like http://www.yourdomain.com/folder/lander.html?operatingsystem={os}
Adding Basic Javascript
And now it's time to code!
We're going to use the programming language Javascript for this tutorial. Javascript is entirely run on the browser of the person viewing your web page, rather than on your own server.
That means that any Javascript programming you use in your Web pages will work regardless of where it is hosted - on a VPS, on a CDN, or anywhere else. Programming languages like PHP, by comparison, require that your landing page is running on a server you control, and thus don't work if you're serving landing pages from a CDN.
The first thing we need to do is to add the HTML tag that tells the web browser "this block of text is Javascript, and you should treat it as such".
If you forget to add this tag before and after your Javascript, it won't work!
So, just before the </body> tag, add:
<script type="text/javascript"> </script>
Now, add the following line of code in between the script tags (in other words, just above </script>):
Reload - and you'll see an alert box appear with the caption "This Offer Is Really Important!"
It's immediately possible to see how you could use this in a lander - but how does the programming work?
This line of code is composed of 4 parts:
- The function is what makes it all happen. Any time you see a word with a bracket after it, like hide( , alert( , or getDate( , what you're looking at is a function - it's the "doing word" of Javascript (and most other languages). In this case, "alert" is the function that pops up an alert box. You can see a list of other common Javascript functions here: http://www.w3schools.com/jsref/obj_window.asp . (Technically, most of these are "methods", rather than "functions", but don't worry about that now.).
- The Parameters are the information we pass to a function to customise what it does. Functions are followed by their parameters, enclosed in brackets, as we see here. The alert function only takes one parameter, which is the message you want to display. Some functions don't always need any parameters, but they still need the brackets - hide(), for example.
- The message we want to display is a line of text. In order to avoid Javascript getting confused and thinking we want it to treat this as more programming language, we enclose it in inverted commas: "". That tells Javascript that it's a piece of text, which is known in programming terms as a "string". (Don't ask why - it's buried in the mists of time.)
- Finally, we use the semicolon - ; - to tell Javascript that this instruction is over - the end-of-line. Many programming languages use semicolons to show the end of a particular instruction, and ignore line breaks almost completely. If your script isn't working for some reason, there's a good chance that there's a semicolon missing!
OK, that's a very simple example. Remove that line of code, and let's get onto something more complex.
Grabbing Code From The Web
We need to be able to retrieve the information that our tracker sends to us as GET parameters in the URL's query string (again, if you don't understand these, read through How To Understand Tracking) . But that's a bit complicated, because Javascript doesn't have any built-in functions to retrieve individual GET variables.
We could code our own function, but that's pretty complex stuff: it'd take more than this tutorial to explain how.
But fortunately, there's a simpler way to do it: Google.
One of the reasons that basic programming is such a powerful skill is that expert programmers share their "recipes" all the time online, as functions, and it only takes a little bit of skill to use them.
In this case, Google "javascript get query string values". You'll probably see that the top result is from a site called "Stack Overflow", and is called "url - How can I get query string values in JavaScript?"
Stack Overflow is a Q&A site for programmers, where many of the best programmers in the world help each other out and share functions to do almost every task you could possibly need to do.
Click on the link, and scroll down to the first answer. You'll see it's in the form of a function:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
That code now adds a function to Javascript which you can use whenever you like - the getParameterByName() function. That takes the name of a GET parameter, and returns its value.
Being able to use code from the Web is a programming super-power: you can use sites like Stack Overflow to put together very powerful code very quickly, even if you don't have the coding knowledge to do it yourself.
If you want to see this particular piece of code in action, add the following line just after the function you just added:
Then use your browser to go to the URL of the lander you're working on, with the query string "?model=iPhone5" added on the end. So - http://www.yourserver.com/lander/?model=iPhone5 .
You'll see "Your Phone Is A iPhone5" pop up as an alert.
Putting It All Together, Part 1
Now we can retrieve our GET parameters, all we need to do is modify our lander rather than popping up alert boxes.
To do that, we'll need to use something I mentioned earlier: methods.
Methods are special types of function that are attached to objects in the Javascript world. Because Javascript knows that it's being run on the Web, it has a number of predefined objects it can modify, which are parts of the browser: the window, the browser history (used to change where the back button goes, for example), the location, and the document itself.
We run a method just like we run a function: with two brackets after it into which go our parameters. However, we have to specify the object that the method is attached to first, then a period, then the method - so where a function is just function(), a method will be object.method() .
Confused? Don't worry. Most of the time the difference between methods and functions isn't too important unless you're doing clever things with the code!
So, for our example here, we want to change the text that we specified in our lander with an id, way back in "Setup". If you're using the example lander, then the id we used is "operatingsystem".
First, we need Javascript to find the bit of text we want to modify. There's a method for that attached to the "document" object, called "getElementById()". It takes one parameter, which is the name of the id we want to find, as a string.
So, can you figure out what the line of code is that you'll need to use to find the "operatingsystem" ID?
Try and write it down just now, then come back to see the answer below.
Putting It All Together, Part 2
The line of code you need to use is:
If you added that to your lander, though, you'll have noticed it doesn't do anything!
That's OK - all that line of code does is find the object that has the ID "operatingsystem".
We can then modify that object's properties. All HTML objects have the properties you can see if you use "inspect element" in your browser - their CSS styles and their HTML code.
In this case, we modify the innerHTML - the HTML inside the tag - to be equal to the value of the "operatingsystem" query string. We do that by just setting it to be equal, using the "=" sign:
Add that line of text at the bottom of your script block, just above "</script>", and navigate to the dummy campaign URL you set up in "setup". If the campaign's set up to forward the information you want correctly, you'll see the text change to show the data from your tracker - if you're using our example of "operating system" here, you'll see the operating system that your tracker detects.
And that's it - you've done your first bit of programming!
What next?
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 your new-found programming skill:
- How would you display the parameter you chose in two places on the page, rather than just one?
- How would you display two different parameters? For example, OS and OS version?
- How would you only display the parameter you chose when the user clicks on a button? You might want to Google the phrase "onclick" for that one!
- How would you change the span's size as well as its text? Have a read of this to get some ideas!
I hope you found that useful! Here's Part 2 of the course!
Awesome post caurmen!
Love it 
I followed you up until the code was supposed to change the text. Didn't happen on mine. Could you post the entire html document as it is supposed to look like at the end? Should help me locate where I went wrong. Thanks!
Sure thing - here's the full final code for the sample landing page:
<head>
<title>Parameter Passing Test</title>
</head>
<body>
<h1>Your tracker believes that your OS is:</h1>
<p id="operatingsystem">No Idea</p>
<script type="text/javascript">
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
document.getElementById('operatingsystem').innerHTML = getParameterByName("operatingsystem") ;
</script>
Another gem by Caurmen, keep em coming!
Thanks!
BTW, if anyone has any suggestions for programming tasks that I should feature in later parts of this series, let me know, either by PM or below!
OMG Caurmen! It seems that every time you do a new tutorial it coincides with what I happen to be doing! I just figured out how to do device callout on the lander, as well as how to call javascription functions using document.GetElementByID, JUST LAST WEEK! Was just planning to look for some coding tutorials when I saw this one!
Suggestions for programming tasks (that I learned last week but will no doubt be useful for fellow STM'ers): countdown timer, displaying date and year and day of week, executing functions that follow a click using "onclick".
And lastly, something I would like to learn to do myself: how to make different elements show and hide.
You're the best! I LOVE every single one of your tutorials and will be looking out for Part 2!
Thanks so much...
Amy
Edit: NVM about showing and hiding elements - just found your other tutorial: http://stmforum.com/forum/showthread...r-Your-Landers
Wish I had this when I was starting out! Damn you...
I'm trying to tie together two scripts I've found on STM to no avail. I think I know why it's not working. You can't put html inside an alert box. But then I'm wondering how I can echo a parameter inside an alert box.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Generic Headline</title>
<style>
body {
background: #fff;
}
</style>
<script language="javascript" type="text/javascript">
alert("Attention <p id="brand"></p1> <p id="model"></p1> /n Do you like Generic Headlines?");
</script>
<meta http-equiv="refresh" content="0; url=http://xxxxxxxx.voluumtrk.com/click">
</head>
<body>
<script type="text/javascript">
window.location = "http://xxxxxxxxxx.voluumtrk.com/click";
</script>
<script type="text/javascript">
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
document.getElementById('brand').innerHTML = getParameterByName("brand") ;
document.getElementById('model').innerHTML = getParameterByName("model")
</script>
</body>
</html>
When I use this script the parameter I'm echoing always appear in a new line. For example:
your phone is
Samsung Galaxy
please download update.
instead of:
your phone is Samsung Galaxy please download update.
I tried playing with it with no success. Any ideas?
OK, I found the issue 
For anyone having this issue it's actually written already in the post.
instead of writing:
<p id="operatingsystem">No Idea</p>
Write instead:
<span id="operatingsystem">No Idea</span>
That should be great series! And surely handy.
Can someone tell me what this script does exactly? (found on a ripped landing
var isSafari = Object.prototype.toString.call(window.HTMLElement) .indexOf('Constructor') > 0;
function launchpopLink1(){
url = "#";
document.location.assign(url);
if (isSafari) {
window.open(
'#',
'_top'
);
}
return false;
}
</script>
Originally Posted by alexlion
Just wanted to update this, the script that also works in entry pops and other scripts on the page is here:
<script type="text/javascript">
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
</script>
" + getURLParameter('model') + "
<script>document.write(getURLParameter('model'))</script>
How can I specify a default parameter for 'model' in a pop-up window? For example, if the tracker doesn't recognize the phone model and it shows up as "generic" or doesn't show up at all, I would like to assign the value of, say, "Android" in such case.
Thanks
Originally Posted by kathy_k
http://stmforum.com/forum/showthread...403#post220403
Amy
Thanks Amy. I tried assigning a variable and then using an "if" statement but couldn't get it to work in a pop-up window. It works fine in html though. Can you give an example by any chance?
Originally Posted by kathy_k
Amy
Got it! Works now.
Hi caurmen,
Thanks for the great thread.
I am trying to follow as closely as possible. But it seems like my code does not work. When I run a campaign test in
Here is my code
<head>
<title>Parameter Passing Test</title>
</head>
<body>
<h1>Your tracker believes that your Operating System is:</h1>
<p id="operatingsystem">No Idea</p>
<script type="text/javascript">
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
document.getElementById('operatingsystem').innerHT ML = getParameterByName("operatingsystem") ;
</script>
Hey deetei,
Could you perhaps share how your link looks like when you reach the landing page with that code?
Cheers,
Manu.
Hi Manu,
This is how it looks after I test it with Volumm. Seems like the URL calls out the right operating system which is Windows. But the landing page does not.
Meanwhile, when I run the page with the code of caurmen, it works.
Code:
<head>
<title>Parameter Passing Test</title>
</head>
<body>
<h1>Your tracker believes that your OS is:</h1>
<p id="operatingsystem">No Idea</p>
<script type="text/javascript">
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
document.getElementById('operatingsystem').innerHT ML = getParameterByName("operatingsystem") ;
</script>
Hmmm - what's the difference between the 2 landers? Can you please paste each lander with this tool, so it highlights the syntax? https://pastebin.com/
Then I can look closer at what could be causing this, since it seems the issue is something small. Since Caurmen's page works, it must be some small mistake somewhere where you copied his code
Hey, when pasting the landing page code in this tool ? Which Syntax highlighting should I display ? Is it Java Script
Yes, JavaScript pls.
Hi Manu
Link of Caurmen's lander:https://pastebin.com/1uVVYEa0
Link of my lander: https://pastebin.com/4k1rv3Uz
You can have a look at it. Honestly, I have no idea what I'm doing. Hope that you find something wrong with my code
Cheers,
Tien
Are you using CloudFront to deliver these landers?
Did you recently upload a new version of it with the same name (overwriting one that was with a mistake)?
Basically, I think it's somewhat likely CloudFront didn't update the endpoint in your location so you are actually not visiting the code of the lander you linked, since otherwise, I also can't see the difference there.
Can you right click on the lander that doesn't work, then go to Inspect in Chrome and see if the code there is correct? You can try pasting that one too in case it's not obvious.
I have this strange issue where it sometimes works and sometimes doesn't. Refresh the page and it changes from "Windows" to "no idea" and back.
Couple of things I noticed:
document.getElementById('operatingsystem').innerHT ML = getParameterByName("operatingsystem") ;
I think .innerHTML should be written together without the space like in Caurmen's code.
Is it correct that there is no closing [/body] tag at the end of the code. So it ends with the closing script tag?
When I removed the closing body tag like in Caurmen's example code, it started working sometimes as opposed to never.
Originally Posted by manu_adefy
Any better alternative for this tutorial?
Hey lifter123,
By AWS, do you specifically mean CloudFront?
The way CloudFront works is that it sends out the new file to all the so called endpoints (locations distributed across the world) and each location caches it and only checks for a new version after a certain amount of time.
That means that if you replace a file with the same name, it will take that certain amount of time for the new version to be used.
That's why it could be working sometimes only.
You should always use a new file name if you make such a significant change to the file.
Also @deetei, lifter caught what I missed, it should be HTML without any space there. High chance at least.
Hi,
I followed along the whole part 1 of the tutorial but I am having trouble accomplishing the follow up questions at the end.
- How would you display the parameter you chose in two places on the page, rather than just one?
- How would you display two different parameters? For example, OS and OS version?
What would the code look like to accomplish these two tasks?. Especially the first one?
Originally Posted by cashhound
You can display a parameter in multiple places on the lander, either by using the "getParameterByName" call every time, or by using "getParameterByName" once and setting the value to a variable, and THEN using that variable multiple times on the lander, as caurmen illustrated in part 2 of this tutorial:
https://stmforum.com/forum/showthrea...403#post220403
Example of using the getParameterByName call multiple times:
Example of assigning the value to a variable and THEN using it multiple times:
alert ("Dear "+ cityname +" resident: Every day we select 3 lucky winners from the city of " + cityname + " to win one of our daily prizes!");
To display multiple parameters - just call each using getParameterByName:
osvervalue = getParameterByName("osversion");
alert ("Your " + osvalue + " " + osvervalue + " does not seem to have virus protection! Download our software now to avoid viruses!");
Reminder: All the coding examples used above will need to be enclosed in <script> </script> tags.
Lastly - in all the examples above, I used "alert"s which will cause a little window to pop over the lander. If you're just wanting for text to show on your lander, simply use something like this:
Hope that helps!
Amy
EDIT: I think something else would be worth mentioning. Notice how caurmen define the function name as "getParameterByName" in his example:
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
However, note that this function's name may be different on every lander. If you're fixing up a ripped lander, you'll need to find this function, see what the function name is, and use THAT in your parameter calls.
Here's an example from an actual lander, where the function was named "getURLParameter":
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
);
}
</script>
<script language="Javascript">
alert ("Taniah, "+ getURLParameter('model') +" anda telah dipilih sebagai pemenang bertuah daripada sistem kami\n\n(1) hadiah tidak dituntut boleh menjadi milik anda!\n\nKlik OK untuk meneruskan dan menebus peluang anda untuk menang!")
</script>
I have added this code to the footer of a Wordpress lander and replaced "operating system" with "city" yet when I visit my campaign URL it keeps saying "no idea" for the name of the city in the footer of the page and the name of the city in the headline of the lander doesn't change. I use
Something that I wanted to add for those of you who find themselves confused about the code not showing up is this:
If you place the <script></script> before the body (html/css) then the script may struggle to identify the id's that you've put in your html. If you have your script at the bottom of your code than this gives you time in order for your html to load properly and then be identified by your script which will load after.
I pasted the starter code into sublime text, saved it as HTML, hosted it on S3.When open the file it appears in my brower as code, but then when i try to visit the link it just downloads it as a file, how would i rectify this?
EDIT: Fixed, turns out the problem was i was saving the file type as html, actually i needed to save the file name ending .html just incase anyone else gets stuck on this.
Originally Posted by mat4499
Home > Technical & Creative Skills > Programming, Servers & Scripts