In this tutorial we will show you how to update stored tracking field data based on user input.

Note that to do so, you should have a tracking field pre-defined for the traffic source being used and ideally leave it blank.

Getting Started

Background: Let's imagine we want to sell a product that comes in 3 different sizes: regular, double and max XL.

However, before investing money into the creation of these 3 variants, we want to know which one will be the most popular.

To do this, we will have a page with three radio buttons, asking the visitor to choose which one they would like to order.

Our test page looks like this:

The solution: three things must be in place to be able to track the visitors' choices.

The traffic source we setup in FunnelFlux must have a tracking token to store these choices
The page that captures the choices must use some Javascript code to append the visitor's choice to the action link -- to pass the choice to FunnelFlux
The funnel must capture the choice appended to the action link and replace the value of the tracking token created in step 1

Let's have a look at each of these steps.

Step 1: Setting up the traffic source

You will simply add a new tracking token to store these choices for your traffic source.

Here is an example for our FB Ads traffic source:

You can keep the default value empty as shown above.

Step 2: Setting up the lander

What we want to do here is add new parameters to the action URL placed on the lander.

All custom parameters added to your action URLs are automatically added by FunnelFlux to the Accumulated URL Params buffer.

This buffer is then accessible in the entire funnel.

If the action url placed on your lander is yourdomain.com?flux_action=1 then you want to append a new parameter like:

yourdomain.com?flux_action=1&product-choice=regular

...where the value of that new parameter represents the choice made by the visitor.

The action link placed on your page must be updated in real time, whenever the visitor selects a new entry.

When they then click that link, the product choice will be available to the remaining nodes in your funnel for further processing.

Here is a fully working example of such a page:

<body>

<form id='form-product-choices' action=''>
<input type='radio' name='product-choice' value='regular' /> Regular Size<br/>
<input type='radio' name='product-choice' value='double'  /> Double<br/>
<input type='radio' name='product-choice' value='max-xl'  /> Max XL (Best Value)
</form>

<a id='action-link' href=''>Click to continue</a>

<script>
var form = document.getElementById('form-product-choices');
  form.addEventListener('change', function(e) 
    {
    // Update the HTML action link based on the selected product.
    // The product choice is appended to the action 1 url
     var actionUrl = 'http://your-flux-domain.com/?flux_action=1';
     var radioButtons = document.getElementsByName('product-choice');
        for( var i = 0; i < radioButtons.length; i++ ) {
          if( radioButtons[i].checked ) {
            actionUrl += '&product-choice=' + radioButtons[i].value;
            break;
           }
         }
     document.getElementById('action-link').href = actionUrl;
     });
</script>

</body>

Step 3: Setting up the funnel

Our demo funnel looks like this:

The lander "Action Accu Example" is the page with the different choices and action link.

After a click, the visitor goes through a PHP node that gets the product-choice from the accumulation buffer, and replaces the initial product-choice tracking field of our traffic source with the new value.

After that, the visitor is redirected to bing.com

Here is how the code in the PHP node looks like:

And here is the code in plain text if you want to copy-paste it:

<?php

require_once 'PHPNodeHelpers.php';

$accu = PHPNodeHelpers::loadAccumulatedParams();
if( !empty($accu['product-choice']) )
{
    PHPNodeHelpers::updateTrackingFields([
            'product-choice' => $accu['product-choice']
        ]);
}

?>

IMPORTANT

The PHPNodeHelpers::updateTrackingFields function sets an async operation and a single PHP node can only do one of these. So make sure you do this all in one consolidated call.

Result

For the specific visitor that went through this process, the data under the tracking field "product-choice" wil have been updated to whatever they chose.

The value also enters the accumulated URL params buffer, so all this data can be passed to the next lander/offer if you double click it and toggle the "receive accumulated URL params" option.

Furthermore, landers or offers after this PHP node that have {trackingfield-product-choice} in their URLs will successfully receive this value.