Masking outgoing links on landers
Zeno avatar
Written by Zeno
Updated over a week ago

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 be http://mydomain.com/out/  and http://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:

  1. 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 load mydomain.com , mydomain.com/ , and mydomain.com/index.html , and you write out , /out  or /out/ , the end result of clicking the link could vary. Test any links yoiu create as always and be consistent.

  2. 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.

  3. 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.

  4. 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 to flux_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 to http://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 source

  • Any 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:

  1. Depending on your exact configuration, we can't guarantee that linking from a lander > PHP script > action link will work flawlessly

  2. 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!

  3. 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.

  4. 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>

Did this answer your question?