1. Help Center
  2. SETUP
  3. UTM and Tracking Setup

Configuring a TypeForm Quiz in an iFrame for Tracking

There are two challenges with tracking a TypeForm quiz embedded in an iFrame (or modal popup, which is also usually an iFrame).
 
The first is that the UTM parameters need to be passed into the iFrame from the original URL of the parent page on which the TypeForm quiz Frame is contained.
 
This likely requires custom JavaScript to be placed on the parent page, which will capture the UTMs and pass them to the iFrame tag calling the TypeForm quiz.
 
To receive the UTM paramters into the TypeForm quiz, you will need to setup 5 custom hidden fields - one for each UTM parameter.
 
They are:
  • utm_campaign
  • utm_medium
  • utm_source
  • utm_content
  • utm_term=test
NOTE: The UTM tags are case sensitive. The JavaScript that grabs the UTMs from the original page URL should pass the UTMs to TypeForm in all lower-case regardless of how they are received to the page.
 
Here's an example of the code we've used in the past. You may use and customize it for your specific scenario.
 
<script>
/*
* That script allows to capture utms from the url and translate it to the TypeForm links on the page
*/

!function (window, document, undefined) {
    document.addEventListener('DOMContentLoaded', function() {
        var urlParams;
        var parser = document.createElement('a');
        var pattern = /utm_|wickedid|wickedsource/i;
        parser.href = window.location.href.replace('%20#', '?').toLowerCase();
        console.log('Wicked: utms capture started!');
        
        if (pattern.test(parser.href)) { // url contains utms
            var utms = window
            .location
            .search
            .replace('?','')
            .split('&')
            .reduce(
                function(p,e){
                    var a = e.split('=');
                    p[decodeURIComponent(a[0]).toLowerCase()] = decodeURIComponent(a[1]);
                    return p;
                },
                {}
            );
    
            // create params string
            urlParams = createUtmsparams(utms);
            
            if (typeof urlParams === 'undefined' || !urlParams) {
                return;
            } else {
                // find all links for changing
                var links = document.querySelectorAll("a");
                var i; var pattern = /typeform.com/;
                for (i = 0; i < links.length; i++) {
                    var link = links[i].href;
                    // change typeform links only
                    if (pattern.test(link)) {
                        link = (link.indexOf('?') != -1) ? link + '&' : link.replace(/\/+$/, '') + '/?';
                        links[i].href = link + urlParams;
                    }
                }
            }
        }
    });
    
    function createUtmsparams (utms) {
        var checkObj = ['utm_campaign', 'utm_source', 'utm_medium', 'utm_conttent', 'utm_term', 'wickedid', 'wickedsource'];
        var selfUtms = [];
        Object.keys(utms)
        .map(function(k) {
            if (checkObj.includes(k)) {
                selfUtms.push(encodeURIComponent(k) + '=' + encodeURIComponent(utms[k]));
            }
        });
        return selfUtms.join('&');
    }
}(window, document);
</script>
 
Second, the UTMs and the user's email address must be passed via URL parameters from TypeForm to a landing page on which the Wicked Reports tracking code can be properly placed.
 
If these conditions are met, links to pages containing iFrame embedded TypeForm quizzes can be tracked.
 
If you have any questions about these instructions, please contact support@wickedreports.com for further guidance.