There are many situations where you may need a specific way of redirecting a user, other than them just clicking a button with some URL attached.
Here I'll cover a few redirection approaches for action links and situations where they can be useful.
PHP-based redirection
The simplest way to bounce a user from A to B is with PHP, specifically a PHP file with a location header in it that tells the browser to load another URL.
How can this be useful?
You can point links to a file e.g. redirect.php. You can change the contents of that file at will without having to modify existing links that point to it.
You can do advanced scripting inside that file if you want to, and can easily manipulate query string data in your URL, as well as use it to change decisions
These redirects are very fast as they are server-side and require no processing by the user's browser -- it simply bounces to the next URL to load
You can use this to send people to an internal link first, that then redirects externally. This is becoming increasingly popular - e.g. you can send people to mydomain.com/out/ and within that folder have an index.php file that redirects to a flux action link. In most scenarios this will redirect fine since referrers are passed through and cookies are present (in some situations e.g. when using Fluxify + advanced settings, this method may not work).
Here is an example PHP file that will bounce someone to your action link:
<?php
header("Location: http://mydomain.com/?flux_action=1")
?>
Yep, that simple.
How to make this? Just create a text file, place this code in it, then rename the file to a .php extention.
Want to rotate equally between several links for some reason? Try this:
<?php
$redirect[0] = 'http://url-1.com';
$redirect[1] = 'http://url-2.com';
$redirect[2] = 'http://url-3.com';
$number = mt_rand(0,2);
header("Location:$redirect[$number]");
?>
Want to redirect to some URL and pass any query string parameters along? This is useful if you want to declare these via your link on the preceeding page:
<?php
header("Location: http://mydomain.com/?".$_SERVER['QUERY_STRING'])
?>
PHP is your friend when it comes to basic redirection - just be sure to use a text editor e.g. SublimeText, Atom editor, Dreamweaver etc. that has some basic syntax highlighting to avoid common errors like missing a semicolon.
Javacript on-click redirection
You can easily use Javascript to make a page redirect somewhere, e.g. on a timer. However here I'll go over how to use Javascript to manage redirection of outgoing actions/clicks. Why is this useful?
This will let you fire other javascript events before redirecting people. I'll give an example of how you can use this to fire Facebook JS events on clickthrough, something which you would otherwise accomplish using javascript nodes in FunnelFlux (doing it this way is faster, but more complicated to set up).
You can programmatically control outgoing links using client-side scripting, so can have all code/files on a CDN and don't need a server running PHP
Because you use JS to control trigger redirection, your page source code does not need external links for the call to action links (useful if you want your page to not show lots of external links to a tracker, for whatever reason).
Basic redirection with Javascript
Here's an example of how to create a Javascript "listener" that redirects a user when they click on a button.
Note that there are a few key requirements here.
First, put this inside the <head> section of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Second, put this before </body>
<script>
$(document).ready(function () {
$(".CTA1").bind({
click: function () {
window.location.href = "//mydomain.com/?flux_action=1";
}
});
});
</script>
Lastly, create a link with a class attribute of "CTA1", and set the href attribute to javascript:void(0); so that the link is effectively inactive:
<a href="javascript:void(0);" class="CTA1">Action Link 1</a>
Here's a full page HTML version of this:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a href="javascript:void(0);" id="CTA1">Action Link 1</a>
<script>
$(document).ready(function () {
$(".CTA1").bind({
click: function () {
window.location.href = "//mydomain.com/?flux_action=1";
}
});
});
</script>
</body>
</html>
Redirecting for multiple buttons/links
Want to do this but have multiple different buttons? Just create different buttons with classes of CTA1, CTA2, etc. and duplicate the blocks that handle these:
<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>
Coupling in other JS events such as Facebook's
Now, want to fire some Facebook JS event as well?
The best way to do this is add a delay (e.g. 500 ms is more than enough), throw the FB event into the above function, and make sure you have the default universal Facebook JS somewhere else on the page already (this must be loaded before the below code otherwise the browser will not have "fbq()" defined.
Here's how you can rework this to fire an AddToCart event and redirect out:
<script>
$(document).ready(function () {
$(".CTA1").bind({
click: function () {
fbq('track', "AddToCart");
setTimeout(function () {
window.location.href = "//somedomain.com/?flux_action=1";
}, 500);
}
});
});
</script>
You can add whatever javasript events you want into this function, just be sure to check syntax and test it live to make sure it works before relying on it.
If you want to add custom JS events and outgoing links for different buttons, just duplicate the CTA1 block and all it's JS up to the second to last closing brackets to make different "handlers" of the different buttons, and of course change the classes from CTA1 to CTA2 and so on, much like in the previous example.
Meta refreshes
The meta refresh is called this because it is set in the metadata section of a page, in the <head> block.
It's very simple and rarely used these days unless you want a basic HTML page to bounce to another URL and for some reason can't do this with PHP, a tracker, or some other faster redirect process.
Here's a basic example of a meta refresh:
<html>
<head>
<meta http-equiv="refresh" content="0.1; URL="//somedomain.com">
</head>
<body>
<p>Something here, but the user won't see it since it won't load</p>
</body>
</html>
And here's and example that uses a meta refresh if javascript is disabled, but otherwise uses Javascript, with code included to allow changing the delay before the redirect happens (set to 1.5 seconds for both the meta and JS options)
<html>
<head>
<noscript>
<meta http-equiv="refresh" content="1.5; URL="//somedomain.com">
</noscript>
<script>
var targetURL = "//somedomain.com";
function doRedirect()
{
setTimeout( "timedRedirect()", 1.5*1000 );
}
function timedRedirect()
{
window.location.href = targetURL;
}
</script>
</head>
<body onLoad="doRedirect()">
</body>
</html>
The above can be useful if you want to put some JS code in the <body> section that will execute, then the page will redirect out.
This is more or less the same way JS nodes work in FunnelFlux -- your code gets executed on the HTML page and you can set a delay before it redirects to some new page.
So if you do want to use the above option, keep in mind JS nodes in FunnelFlux are going to be quicker/easier to manage and don't require uploading of any pages.