How to retrieve UTMs in forms with Pardot IFRAME

As we discussed in our previous article on the “Google Analytics Connector for Pardot”, it is not always easy to retrieve the UTMs so that this information appears to you in the leads once you activate the Google Analytics Connector. In this article we are going to see how to retrieve the UTM in forms with Pardot Iframe.

How to retrieve utms in forms with pardot iframe

The possible cases are:

If you can touch the server code, add the variables there through your back programming code: PHP, JAVA, .NET, etc.
In case you can't touch it, add those IFRAMES with a javascript code.
If you cannot do either one or the other, you have no choice but to add it in the Pardot FORM. There you can add a javascript to retrieve that information.

Use server code

For this, the normal thing is that you count on your IT department, theirs is to save the information of the UTM in session and then print it in the iframe, if the iframe has the structure:

We should include the utm by code, if it were php it would be something like this:

Adding javascript code in the “parent” page

If we want to include the javascript code instead of server code because we have a CMS that does allow us this code from its manager or for any other reason, we would have to include something like this for each form:

</noscript>

var form = ' https://dominio.ejemplo/l/10/2011-00-02/12345';

var params = window.location.search;

var thisScript = document.scripts[document.scripts.length - 1];

var iframe = document.createElement('iframe');

iframe.setAttribute('src', form + params);

iframe.setAttribute('width', '100%');

iframe.setAttribute('height', 500);

iframe.setAttribute('type', 'text/html');

iframe.setAttribute('frameborder', 0);

iframe.setAttribute('allowTransparency', 'true');

iframe.style.border = '0';

thisScript.parentElement.replaceChild(iframe, thisScript);

</script>

Several questions about this code, it will work as long as those variables are in the URL of the parent page, if not, you need some technique to store those variables and retrieve them here, either using Google Tag Manager to store them in cookies, or in session and printing here the same as in point 1, those variables, but composing the URL variable in a different way form + '?utm_medium=<?=$ utmMedium?>&utm_source= <?=$ utmSource?> etc etc'.

Putting javascript code in the FORM and redirecting the iframe to itself + the UTM variables

It can be somewhat overloaded and if you have a lot of forms, it can actually overload the page, but once you have it implemented, it is a relatively simple solution to replicate it on any website with Pardot and iframes that you manage, for us as an agency it is something that is not useful and we use.

Step 1. Google Tag Manager

We store through Google Tag Manager in a cookie the information of the UTMs which enter the page of the web (there you can play with the duration of the same, if you want to assign that origin, even if a month has passed as long as the lead during that period has not been generated, you can set its expiration to 1 month).

Step 2. Code for iFRAME

We check that it is an iframe and that it does not have UTM variables yet

We retrieve the information from that cookie or cookies (according to the taste for cookies). Here we leave you a type function:
function getCookie(cname) {

var name = cname + "=";

var ca = document.cookie.split(';');

for (var i = 0; i < ca.length; i++) {

var c = ca[i];

while (c.charAt(0) == ' ') {

c = c.substring(1);

}

if (c.indexOf(name) == 0) {

return c.substring(name.length, c.length);

}

return "";

}

We compose the URL and finally we do the auto-redirection of the iFRAME (previously checking if we should add the ? or & symbol depending on whether the URL already came with some parameter (sometimes they are added to pre-feed form fields, typically hidden fields).

if (urlParams !== '') {

var simbolo = window.location.href.indexOf("?") === -1 ? "?" : "&"; window.location.href + simbolo + urlParams;

}

In conclusion, sometimes it is not easy to capture the UTM, but one way or another in the end you will reach the desired destination, choose the one that best suits you, or surely you can come up with a newer, more functional and elegant one. For now, with these systems we have saved this problem and our clients have that information in their database to be able to get the most out of their campaigns.