Skip to main content
All CollectionsGeneral questions and guidesLanders & Offers
How to use FunnelFlux tokens to pass dynamic data to your landers (and use it)
How to use FunnelFlux tokens to pass dynamic data to your landers (and use it)

Here I go over how to pass data from your tracker to your landing pages AND how to grab this code using PHP and Javascript

Zeno avatar
Written by Zeno
Updated over 7 years ago

Dynamic text in landers is quite common -- you will quite often see landers that mention your country, current city, device make/model and so on.

Generally this is done by passing text in the URL as part of the query string (the ?a=b&c=d part), then using Javascript or PHP to print that text somewhere in the HTML.

This can be useful not only for text the user reads, but also for code-level input such as passing a FunnelFlux visitor ID to a form, some ID to a script, etc.

Below are instructions on passing data from FunnelFlux, then examples of how to use this data via Javascript and PHP.

Passing data to your landers

To dynamically pass this with FunnelFlux there are two methods:

Edit the lander URL

In the lander configuration, edit the URL and append this data. You can use any available FunnelFlux token as in the menu to the right to make this dynamic.

Accumulate URL Parameters in the Funnel

Secondly, in funnel settings, you can choose to accumulate URL parameters on a lander in the funnel. Just double click on the lander node:

This will append all parameters that came in the initial tracking link, the one used at your traffic source. Note that in the funnel's advanced settings you can also add some extra parameters to this list. You can use any FunnelFlux token as well:

Using Javascript

Javascript is client-side (happens in the visitor's browser) and it is easy to pull content from a URL and write it into the page.

Firstly, note that FunnelFlux's javascript that you put on your landers (the no-redirect tracking code) has functions available to pull data from your URL, so you don't need any extra scripts to do that.

You can view more details here

To summarise, you can use the following function to then print out data from your URL:

<script>fflux.getURLParam('key-name-here')</script>

e.g.

<script>fflux.getURLParam('country')</script>

If you are not using the on-page Javascript, you can add some basic code to your page that creates the "get stuff from URL" function.

Add the following code to the <head> part of your HTML code:

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

Then, when you want to inject dynamic text into the HTML, use the following:

I love <script>document.write(getURLParameter('country'))</script>!

This will insert whatever value you passed under the country key, e.g. with country=australia, or country=brazil, and so on.

Note that if you want to use these values inside other scripts or HTML tags themselves, you will need different Javascript due to syntax requirements. 

Some examples are provided in additional notes below.

Using PHP

Printing dynamic data into your HTML using PHP is a little bit easier as this code gets processed server-side before getting to the user. 

Because the user's browser does not process the script code to make things happen, there is less chance of error and you don't need to care much for syntax issues.

If using PHP, either use a .php extension for your web page or configure your webserver (e.g. Nginx) to pass html files through the PHP preprocessor by default.

With PHP, you can simple 'GET' URL parameters directly in your page code anywhere by using the following:

<?php echo $_GET['namehere'] ?>

Where "namehere" is the key name for whatever URL parameter you are trying to insert.

E.g. if you have ...&fruit=banana...  in the URL, then "fruit" is the key name, banana is the corresponding value.

Now, if you want to make your lander a bit more robust, you could also set some defaults like "Your City" or "Your Smartphone" in cases where the URL parameters are missing (like organic traffic).

To do this you can add PHP code to the top of your page that GET's all the parameters first, assigns them to their own variables, then sets defaults if any are empty. Example:

<?php 

$city = $_GET['city'];
$country = $_GET['country'];
$model = $_GET['model'];

if (empty($city)){$city = "Your city";}
if (empty($country)){$state = "Your country";}
if (empty($model)){$state = "Your smartphone";}

?>

Then to "echo" any of these parameters in your landing page you would use:

<?php echo $city ?>
<?php echo $country ?>
<?php echo $model ?>

Notes on Javascript

If you are trying to inject data dynamically into HTML tags (inside of the < > characters), e.g. in the case of a form field, you will not be able to use document.write and should instead use Javascript to modify the HTML elements directly.

Here is an example of how to do this for a form field where you want to take something like Visitor ID from the URL and set the value of a hidden form field to this:

URL in FunnelFlux = mydomain.com/lander.html?visitor_id={visitor-id}

<html>
<head>
<script>
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
   );
}
</script>
</head>
 
<body>
 
<input type="hidden" name="FF_visitor_id" id="formfield_id1" value="" />
 
<script>
document.getElementById("formfield_id1").setAttribute('value', getURLParameter('visitor_id'));
</script>
 
</body>
</html>

Here we use the getURLParameter  function provided by the script in the <head> section to grab the "visitor_id" value in the URL, and then we "setAttribute" for the value  parameter of the form field, which has an id of formfield_id1 

If we are using the FunnelFlux inbuilt functions from the no-redirect JS, then...

<html>
<head>
<script>
// our FunnelFlux JS would be here...
</script>
</head>
 
<body>
 
<input type="hidden" name="FF_visitor_id" id="formfield_id1" value="" />
 
<script>
document.getElementById("formfield_id1").setAttribute('value', fflux.getURLParam('visitor_id'));
</script>
 
</body>
</html>

This can be used in many situations, you just need to have an id for your HTML element, in this case a form field input, and then you can use a relevant operation like setAttribute to change something like a value parameter.

What you do here will vary based on the specific scenario, so you'll need to ask a developer for assistance or use your Google Engineer skills if it is a scenario not easily resolved with code as above.

Did this answer your question?