Go Back

How to track Funnels in a single-page application

June 12, 2018

The Funnel Premium Feature of Piwik PRO allows you to define the path leading to a goal conversion that you expect your visitors to make. This way you can later check whether they followed the designed path or dropped off at some point.

Out of the box, the Funnel feature detects the subsequent URLs of organic page views.

Using some JavaScript, along with jQuery, or with the help of Piwik PRO Tag Manager, you can set things up to monitor journey users may take on a single-page solution. For example, this could be multi-step form, which visitors may fill out without ever leaving the same URL.

This example uses a method of manipulating the browser history, to replace the URL which is typically visible in the browser. However, this step is not necessary for Funnels to work.

Prerequisites:

  • Create a tag that will add new variable to your runtime. This needs to have some value until it will be replaced by click trigger:
  • window.my_global_variable = {
    page: {
    previous_link: "none",
    }
    }
  • Configure a PPTM variable called “Previously clicked link”. You will later use it in the triggered tag:

    (function (w) {
    var global = w.my_global_variable;
    var page = global ? global.page : null;

    return page && page.previous_link ? page.previous_link : null;
    })(window);
  • 3. If necessary in your case, add a tag that will prevent links of specific class to actually trigger their URLs:
    $('.link_class').off("click");
    $('.link_class').on("click",function(e){e.preventDefault();
    });
  • Under the click of the “link_class” link you need to execute the following. Parts in double brackets (“{{” and }}”) are the variables delivered by Piwik PRO Tag Manager. You can use your own variables created in JavaScript as well.
    _paq.push(['setReferrerUrl', {{ Previously clicked link }}]);
    _paq.push(['setCustomUrl', {{ Click Url }}]);
    _paq.push(['trackPageView']);
    window.my_global_variable.page.previous_link = {{ Click Url }};
    //below line is just for changing current URL displayed in the browser
    history.pushState({}, null, {{ Click Url }});
  • Thanks to the code above, the Referrer field will be changed with each click, allowing the next click to be linked properly and create Funnel journey in the report.