Landing pages can make you a LOT of money, but most affiliates are doing them wrong.
You want people to feel that the landing page is designed exactly for THEM. This is one of the main rules of copywriting – tailor your message to your audience.
There’s one easy way to do this and it’s by using Voluum tokens.
This is going to be a tutorial-style post. There’s a bit of code involved but it’s just copy and paste.
This skill can make you a lot of money. I’ve made landing page tweaks using this strategy that have taken campaigns from -50% ROI up to 100%+ ROI.
Note: This is Part 4 of my series on Voluum tracker.
Part 1. How To Use Voluum
Part 2. How To Set Up Voluum Campaigns
Part 3. How To Set Up Custom Voluum Domains
What Is A Token?
Think of a token as a way of sending information.
For example, a token that all mobile campaigns use is the ClickID token.
This token generates a unique ID for every visitor. Then this information is passed into your tracker from the traffic source.
Other examples of tokens might be:
- Device
- Brand
- Operating system
- Carrier
- City
A token allows you to grab certain bits of information about your customer.
A split second before someone sees your landing page, Voluum grabs any information that you specify. Then it can perform certain actions with that data.
We will be using this information to display it on our landing pages.
There are a ton of other things you can do with tokens like setting up redirects based on certain rules, but let’s get the fundamentals down first.
What Are We Trying To Achieve?
I’m using a landing page I found on the internet that’s promoting the game Candy Crush Saga. I think this landing page is pretty bad. It’s the first “simple” landing page I found that we can easily customize, so we can use it as a base.
A lot of you guys run app installs and gaming with simple landing pages, so this will work well for this demo.
If you’ve read my posts about localizing campaigns / customizing your landing pages, you can see what’s wrong with this page straight away. There are quite a few things, but there’s one super obvious one.
There’s nothing that says WHO the page is for.
It would increase the conversion rates if we can make this page more targeted.
I want the headline to say “Play Candy Crush Saga Today on Your Apple”, if they are using an Apple device. If they are on another device, it’ll change to whatever device they are using.
Why?
Because someone might assume that the offer is only available on Google Play Store or the App Store and exit without clicking the CTA. We want to reassure people that the offer IS for them.
Note: This is just an example, and I wanna keep it simple so I don’t lose anyone. You can use this skill to insert brand, device, city, ISP etc. but this is just an intro to Voluum tokens.
If you’re doing this for the first time, follow along in the order I’ve written it in.
For this tutorial you will need:
- Server where you can host your landing page
- Ability to upload to your server (FTP / cPanel etc.)
- Voluum account
- Landing page to test this on
- Code editor
Step 1. Place this script in the head of your landing page
<script>
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][,null])[1] || ''
);
}
</script>
Place this script anywhere between the opening head tag <head> and the closing head tag </head>.
You can see below that I’ve put it just under the </style> tag, and just above the </head> tag.
If you’re not sure where to put it, put it in the same place I have to be safe (right before the </head> tag).
Note: Voluum sends information about the user through the URL, so this script enables us to use it. If you’re interested in how this works you can learn about how to use the GET method in PHP here. It’s not necessary for this tutorial but affiliates use a lot of PHP…
Step 2. Insert this script wherever you want your data to appear
<script>document.write(getURLParameter(‘brand’))</script>
Copy and paste the above script EXACTLY as it is here into your landing page. You’ll insert it where you want the brand of the device to show up.
For this tutorial, we are going to add the brand of the device the user is on to the end of the headline.
Here’s what the code looks like for my headline before I change anything.
If you’re not familiar with basic HTML, here’s a guide to what’s going on in the screenshot above:
“Play” is inside the H3 tag with some styles applied.
“Candy Crush Saga on Your Phone” is inside a <span> tag that makes the text green and increases the font size.
“Today!” is outside of the span, but inside the H3, so the text is the same as “Play”.
Look at the screenshot above, and try to understand what the different HTML is doing if you’re lost.
I want the headline to say “Play Candy Crush Saga on Your Apple” if they are on an Apple device. If they are on Android, it’ll say “Play Candy Crush Saga on Your Android”.
All you have to do in this step is add this script where you want the brand name to appear:
<script>document.write(getURLParameter(‘brand’))</script>
After adding the extra text / code
Before adding the extra text / code
It’s just a simple copy and paste of the code.
Step 3. Test your page
This step is just to double check you’ve done everything right so far.
Here’s how to test your script:
- Save your landing page after you’ve put both of the scripts in
- Upload your landing page to your server
- Go to the live landing page on your browser
- You won’t see the device you’re on yet
- Now, add this text to the end of your URL:
?brand=Apple
- So your final URL should look like: http://mylandingpage.com?brand=Apple
Press Enter to reload your landing page, and your headline should change to say “Play Candy Crush Saga on Your Apple Today!” if you’re on an Apple mobile device.
If this works, you’ve set it up correctly and you can go on to Step 4.
If not, go back and troubleshoot.
Here are some of the common mistakes to try:
- Make sure you add the question mark after the end of your URL and before “brand”
- Double check that you have placed the first script inside the head section in the right place
If you can’t get this to work on an actual landing page, start with a bare HTML page. Then try to get this working with just a single sentence.
Once you figure out what went wrong, try doing it again with your actual landing page.
Step 4. Add your landing page into Voluum
If you’ve used Voluum before, this is a simple task.
- Hit “New Lander”
- Add the URL of your landing page that is live on your server
- Add this text to the end of your landing page URL: ?brand={brand}
Here’s my example:
Step 5. Test your landing page works by creating a new campaign
By now you should have done the following:
- Put both of the scripts onto your landing page (one in the <head> section, and the other one where you want the brand name to show up)
- Uploaded your changed landing page to your server
- Tested that the scripts are working by adding this text to your URL ?brand=Apple
- Added your landing page in Voluum and added this text to the end of your landing page URL like in the screenshot above: ?brand={brand}
Now we’re ready to double check that your lander pulls the data in for EVERY visitor that you send to your landing page.
If you haven’t already set up an offer in Voluum, you will need to do that now as you can’t set up a campaign without an offer.
Here’s how to test if your script is working for all devices/visitors:
#1 Set up a new campaign
Click “New Campaign” in your Voluum dashboard.
Note: We’re not going to run any traffic to this, it’s just a test campaign, so you can put any country or offer in it.
The only things you need to do are:
- Set your Destination to “Path”
- Add your landing page to the campaign
- Add an offer to the campaign
Here’s the one I made as an example (Zeropark is the default in Voluum because they are owned by the same company):
#2 Save your new campaign
Once you save your campaign, your Campaign URL becomes available. This is the link that you would normally put into your traffic source.
#3 Test the campaign URL
Instead of putting the link into your traffic source, copy and paste the URL into your browser and press Enter.
The URL should detect that you are on a Desktop, and it should display that on the page. Here’s my example:
Notice how in the URL it displays: ?brand=Desktop
Voluum is figuring out what device we are viewing the page from and inserting this into the URL for us. Then our scripts pull it into the landing page so we can use that information.
You can test it out on your mobile if you want to see how the script responds to that.
Here’s a screenshot from my phone when I click on the Voluum campaign link:
Want to see the actual landing page I used for this tutorial?
Click Here To View Before / After of the Live Landing Pages
Step 6. Use this new skill on your actual landing pages
There are a lot of ways you can use this new skill.
Here’s a list of the tokens you can use in Voluum:
How powerful is it to have all of this data about EVERY person who views your landing page?
Let’s try and get creative here – what can we do with these tokens?
- You could refer to the website they just came from using the token {referrerdomain}. As an example: “75% Discount for Huffington Post Readers for Today Only
- Show the user that the offer is specific to their location by using the {city} token
- Detect if they are using Wifi or mobile data using the {connection.type} token
- Pull the browser that they are using and use this information to personalize the landing page
You can see how powerful this can be if you get creative with your use of these tokens.
Note: You can set up more customized tokens if your traffic source allows it. Voluum has a great guide on how to add dynamic traffic source tokens.
How do these scripts work?
The script inside the head section decodes the URL for us and pulls in all of the tokens. We’re only using one here, but for a real landing page you might use multiple tokens.
This script <script>document.write(getURLParameter(‘brand’))</script> is pulling the individual parameters into the page and putting them where we want them.
This script / tutorial was originally published on the Voluum site here. I wanted to expand on it and show you step-by-step how to do it.
What if you want to use other tokens?
Let’s say you wanted to pull in the operating system AND the brand of the device the user is on.
Here’s how you would do it:
- Add both of the tokens into the Voluum URL so that it looks like this: http://mylandingpage.com?brand={brand}&os={os}
- Insert this script the same as before, but replace brand with os
For example, this is what the code looks like to pull in the brand of the device:
<script>document.write(getURLParameter(‘brand’))</script>
This is what the code looks like to pull in the operating system of the device:
<script>document.write(getURLParameter(‘os’))</script>
Where To From Here?
Get a super simple example working then have a play.
Learning from a guide like this is great to get started. When you play around with your own combinations, you’ll learn a lot faster. You’ll also figure out some cool ways to use these tokens that can mean you come up with angles that others have missed.
Voluum can do some powerful stuff if you explore it and test out some of the features.
Set up some dummy campaigns and try out some experiments.
Got any other badass Voluum tricks you want to share?
Let me know in the comments!
Want To See The Live Landing Pages?
Click Here To View
Featured Image by Vasilev_Ki
[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
