Sometimes you'll want to have landing pages that don't use action links directly.
In other words, you don't want to link to some-domain.com/?flux_action=1
, but rather to an internal page like my-lander-domain.com/out/
.
In some cases you won't want buttons and links to have any href property at all!
In this situation there are two weapons you can easily use: PHP and Javascript.
Here I'll show you how to
a) use internal PHP pages to redirect people to your action links, and
b) how to use Javascript to trigger redirection instead + the pros/cons of each of these methods
Internal Link Masking with PHP
Here's our scenario:
We have a lander at
http://mydomain.com/lander.html
The lander could be using FunnelFlux's no-redirect Javascript tracking or you could link to it via a tracking link, it doesn't matter
Our tracking domain is
http://trackerdomain.com
On the landing page, our desire is to avoid using links like
http://trackerdomain.com/?flux_action=1
and instead use internal (relative) links, e.g./out/
or/go/
, which in an absolute sense would behttp://mydomain.com/out/
andhttp://mydomain.com/go/
Why would you want this? Well, there's a few reasons:
You may want a basic internal script destination to link to so that its easy for you to swap out that page's content later. You would normally switch things in the tracker itself - but what if you changed tracker, or initially had no tracker and now wanted to rotate in a tracking link without modifying the core lander page?
Some systems that automatically review pages, e.g. bots from Google and Facebook, may be sensitive to external links and the frequency/number of these
You may want to do some advanced stuff that you can't do with a tracker, e.g. logging certain server-level data via PHP and so on (though you could probably do this with FunnelFlux's PHP nodes 😉 )
So, here's how we do it:
Change your action links to have a relative path, e.g.
<a href="/out/">My Link</a>
.
NOTE: Be careful with relative links like this. If you loadmydomain.com
,mydomain.com/
, andmydomain.com/index.html
, and you writeout
,/out
or/out/
, the end result of clicking the link could vary. Test any links yoiu create as always and be consistent.
If confused with the above, just use absolute links to your internal "outgoing" page e.g.
http://mydomain.com/out/
and you should be fine.
On your server, via FTP, create the /out folder and create a new file in it called index.php. Note that you could use relative links on your landers and have an /out folder alongside all your lander files (specific), or just have an /out folder in your web root (universal). The latter is wise if you plan to use the same tracking domain and action URLs for all the landers.
Inside that index.php file we will use a basic header redirect to bounce users to our FunnelFlux action link. Here's the code for your index.php page:
<?php
if(isset($_GET['a'])){
$action = $_GET['a'];
}else{
$action = "1";
}
header("Location: http://trackerdomain.com/?flux_action=".$action."&".$_SERVER['QUERY_STRING']);
?>
All you need to do here is modify trackerdomain.com accordingly.
Now, set up a test funnel, send traffic to a lander with these /out/ links and check that things work for you. You'll need to do a bit of fiddling to get comfortable.
Once that is out of the way, here are some additional details:
Changing actions and passing data
You may have noticed the above code isn't simply bouncing people to a single, static link. In fact, it has code prepared (as rudimentary as it may be) to change action numbers and pass on any query string info.
Here's what you need to know:
You can change the action link it will redirect to by adding ?a=X to your out link, e.g.
/out/?a=3
will redirect toflux_action=3
. Simple.Any query string data you add to the /out link will also be tacked on to the FunnelFlux action link. E.g.
/out/?a=2&b=3&c=4
would cause the script to redirect tohttp://trackerdomain.com/?flux_action=2&a=2&b=3&c=4
. Yes I know the a=2 gets added in even though it was just for the action - don't worry, FunnelFlux will just ignore any parameters it's not expecting for the current traffic sourceAny additional parameters you pass can be sent along to later lander/offer nodes if you toggle the "this node needs accumulated URL params" option -- remember that parameters added to FunnelFlux links get added to this buffer.
As a result, a=2 would be passed onward to later landers and this way you'd actually know what action link sent someone there, which can be convenient.
So, with all the implementation out of the way, here is a disclaimer:
Depending on your exact configuration, we can't guarantee that linking from a lander > PHP script > action link will work flawlessly
Like always, make sure the domain used in your tracking link or on-page Javascript matches the domain used in your outgoing action link -- this is vital for cookies to work!
Be careful with linking from https > http. If your initial tracking link or on-page Javascript is loading securely, it would be wise to make sure the PHP script (if using an absolute link) and the action link inside it are also using https.
This approach may not work if using the Fluxify feature on the lander.
Let us know if you have any questions about implementation. Remember, PHP is your friend 😄
Internal Link Masking with Javascript
This approach is a bit more complex but has more utility, especially if you want to do advanced tracking with other analytics tools like Facebook, Google Analytics, etc.
It's worth noting that there are already articles that more or less explain this, you can read them here and here.
So, in a nutshell, what you can do is this:
Replace outgoing links on your page with
href="javascript:void(0)"
Add classes or ids to each outgoing link to identify them, e.g.
<a href="javascript:void(0)" class="CTA1">My Action Link 1</a>
Add Javascript that listens for clicks on "CTA1" elements and then executes some Javascript, such as redirecting, or firing other JS events then doing so
What is the big disadvantage to this? Well, if the user is in any way blocking Javascript, it simply won't work.
Here are some basic pros/cons:
PROS
Easy to implement, no PHP required so can host it all on a CDN
Can fire other JS code for elegant tracking
Let's you define everything on one page/file
The redirection goes straight to your action link, so less chance of issues with redirection, cookies etc., and its faster than the PHP method especially if the user's connection to your server is slow (since it skips a redirect) and loading of secondary PHP file
CONS
You still have the external links on your page, so if these are unwanted for any reason (e.g. getting page flagged), this won't help
Bots that interact with your page are unlikely to be able to process these links, which could be problematic for SEO if important to you.
You can't do fancy things server-side that you might be able to pull off with an intermediate PHP script
So, with the above criteria in mind, here is an example of HTML/JS code you can put near </body> that will handle outgoing redirection for action links 1-3.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a href="javascript:void(0);" class="CTA1">Action Link 1</a>
<script>
$(document).ready(function () {
$(".CTA1").bind({
click: function () {
window.location.href = "//mydomain.com/?flux_action=1";
}
});
$(".CTA2").bind({
click: function () {
window.location.href = "//mydomain.com/?flux_action=2";
}
});
$(".CTA3").bind({
click: function () {
window.location.href = "//mydomain.com/?flux_action=3";
}
});
});
</script>
</body>
</html>
To change action numnber simply change the class on a link to CTAx.
Note that this code requires jQuery, so ensure you have some jQuery min JS loading from a CDN in the head of your HTML.
Be sure to consult the following documents for my information on this approach, including how to fire other JS events (e.g. Facebook tracking events):
P.S. If you want to tack on specific URL query string data to the action links you could do something like this:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
);
}
</script>
</head>
<body>
<a class="CTA1" href="javascript:void(0);">Action Link 1</a>
<a class="CTA2" href="javascript:void(0);">Action Link 2</a>
<a class="CTA3" href="javascript:void(0);">Action Link 3</a>
<script>
$(document).ready(function () {
$(".CTA1").bind({
click: function () {
window.location.href = "//mydomain.com/?flux_action=1&dog=" + getURLParameter('dog');
}
});
$(".CTA2").bind({
click: function () {
window.location.href = "//mydomain.com/?flux_action=2&dog=" + getURLParameter('dog') + "&cat=" + getURLParameter('cat');
}
});
$(".CTA3").bind({
click: function () {
window.location.href = "//mydomain.com/?flux_action=2&dog=" + getURLParameter('dog') + "&cat=" + getURLParameter('cat') + "&bird=" + getURLParameter('bird');
}
});
});
</script>
</body>
</html>