Many third party optin or scheduling services provide forms that can be embedded on your page in an iFrame. There are two challenges with tracking forms 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 iFrame 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 form.
The second issue is that the content in the iFrame must be able to receive and handle the UTM parameters. Assuming this is the case, you will need to ensure that the UTM fields exist. If they do not use the standard UTM value formatting, you will need to adapt the code below accordingly.
Here's an example of the code we've used in the past. You may use and customize it for your specific scenario.
Note: This code is unsupported and will require modification. It is being provided for reference only and should be adapted to your use case by a qualified web developer. In this example, we are using TypeForm as a case-study.
<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>
Finally, the UTMs and the users email address, must be passed via URL parameters from the third-party services back 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 embeded optin forms can be tracked.
If you have any questions about these instructions, please contact support@wickedreports.com for further guidance.