All Collections
General questions and guides
Landers & Offers
Dynamic landing page tracking links (using CNAMEs effectively)
Dynamic landing page tracking links (using CNAMEs effectively)
Zeno avatar
Written by Zeno
Updated over a week ago

One of the useful features of FunnelFlux is the ability to use an unlimited number of tracking domains, and to do so for every part of the tracking process (except for the domain you log in at to view your data).

However, a challenge with using multiple domains arises... cookies!

If you use a tracking link with domain1.com  and send people to somelander.com , the action links on that lander need to also be domain1.com  so that FunnelFlux, upon loading that tracking link, can access the user cookies and know the user's visitor ID and previous history.

Without that cookie, FunnelFlux has no idea who the user is or what funnel they are in.

One workaround for this is using the action link with extra parameters in it, for tracking of organic traffic, that declares the current node and funnel.

That's useful, but this just makes sure the user is tracked and redirected when they click on the action link -- it does not solve the challenge of being able to use multiple tracking domains, heading to the same lander, and have the user data be tracked coherently throughout.

If you are switching from one domain to a new one, you could use find & replace to swap out all domains in your HTML, but understandably this is time consuming and you might want to use many domains at the same time, not switch from A to B once in a while.

The solution to this challenge is to have FunnelFlux pass the "domain" being used for tracking in the URL, sending it to the lander, and then have your lander take this parameter and adjust all links on the page to suit.

This creates a universal lander that adjusts its outgoing links depending on what tracking domain was used. Awesome!

Here's how to do this step by step.

Step 1: Pass domain to your landers

The first thing you need to do is pass the tracking domain used to your landers.

You can do this using the {flux-domain}  token.

Add this to landers/offers as needed with ...&ffdomain={flux-domain}

Step 2: Add JS to your pages

This is where the magic happens.

Now, we want to add Javascript to our landing pages that takes this domain parameter and rewrites links to suit.

NOTE: The following code requires jQuery, so make sure you have a jQuery library loading before it in <head> to ensure it works. We will rewrite this code soon to not have such a dependency.


If you have FunnelFlux no-redirect JS on your page, use the below

Add the following JS to your page. You can add it near </body> to make sure it executes after everything on the page is available:

<script>

changeAllActionLinks();

$('body').bind('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
  changeAllActionLinks();
  }
});

function changeAllActionLinks()
{
changeLinks( 'a[href*="flux_action"]', 'href' );
changeLinks( 'iframe[src*="flux_action"]', 'src' );
}

function changeLinks( selector, attribute ) {

$(selector).each( function() {
var oldDomain = 'old.com';
var newDomain = getFFParameter('ffdomain');
if( newDomain ) {
var newURL = $(this).attr(attribute).replace(oldDomain, newDomain);
   $(this).attr(attribute, newURL);
}
} );
}

</script>


The above script grabs the ffdomain parameter and replaces all <a> element href's featuring flux_action, as well as iFrame src attributes, with the new domain passed under ffdomain.

Note in the JS code above you need to declare old.com as your old domain, which is whatever domain is hard-coded into the HTML at the moment -- i.e. the tracking domain that features by default in the page code.

This should be the full domain, i.e. sub.domain.com , not just domain 


If you are NOT using FunnelFlux no-redirect JS on the page

The code earlier uses a function called getFFParameter that is provided by our javascript. If you don't have it on the page, use the following code instead:

<script>

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
    );
}

changeAllActionLinks();

$('body').bind('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
  changeAllActionLinks();
  }
});

function changeAllActionLinks()
{
changeLinks( 'a[href*="flux_action"]', 'href' );
changeLinks( 'iframe[src*="flux_action"]', 'src' );
}

function changeLinks( selector, attribute ) {

$(selector).each( function() {
var oldDomain = 'old.com';
var newDomain = getURLParameter('ffdomain');
if( newDomain ) {
var newURL = $(this).attr(attribute).replace(oldDomain, newDomain);
   $(this).attr(attribute, newURL);
}
} );
}

</script>


And that's it! Now when you include this code and pass ffdomain to your page, it should update outgoing links accordingly and allow for FunnelFlux to access the cookies needed.

Did this answer your question?