Cómo recuperar los UTM en formularios con IFRAME de Pardot

    Publicado por Santiago Tabuenca el 5 de octubre, 2020

    Como ya comentamos en nuestro anterior artículo sobre el “Conector de Google Analytics para Pardot”, no siempre es fácil recuperar los UTM para que te aparezca esta información en los prospectos una vez que activas Google Analytics Connector. En este artículo vamos a ver cómo recuperar los UTM en formularios con Iframe de Pardot.

    Cómo recuperar los UTM en formularios con IFRAME de Pardot

     

    Los casos pueden ser varios: 

     

    1. Si puedes tocar el código de servidor, añadir ahí las variables mediante tu código de programación back: PHP, JAVA, .NET, etc. 
    2. En caso de no poder tocarlo, añadir esos IFRAMES con un código javascript 
    3. Si no puedes ni lo uno ni lo otro, no te queda otra que añadirlo en el FORM de Pardot. Ahí puedes añadir un javascript para recuperar esa información. 



    Usar código de servidor 

     

    Para esto, lo normal es que tengas que contar con tu departamento IT, lo suyo es guardar la información de los UTM en sesión y luego imprimirla en el iframe, si el iframe tiene la estructura: 

     

     

    <iframe src="https://dominio.ejemplo/l/10/2011-00-02/12345" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe> 

     

    Deberíamos mediante código incluir los utm, si fuera php sería algo así: 

     

    <iframe src="https://dominio.ejemplo/l/10/2011-00-02/12345?utm_source=<?=$utmSource?>&utm_medium= <?=$utmMedium?> &utm_campaign=<?=utmCampaign?>&utm_term= <?=$utmTerm?>&utm_content= <?=$utmContent?>" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe> 

     


    Añadiendo código javascript en la página “parent 

     

    Si queremos incluir el código javascript en vez de código servidor porque tenemos un CMS que sí nos permite este código desde su gestor o por cualquier otro motivo, habría que incluir algo así por cada formulario: 

    <noscript> 

    <iframe src=" https://dominio.ejemplo/l/10/2011-00-02/12345 L" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe> 

    </noscript> 

      

    <script type="text/javascript"> 

    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> 

     

     

    Varias cuestiones sobre este código, te valdrá siempre y cuando estén esas variables en la URL de la página parent, si no, necesitas alguna técnica para almacenar esas variables y recuperarlas aquí, bien usando Google Tag Manager para almacenarlas en unas cookies, bien en sesión e imprimiendo aquí igualmente que en el punto 1, esas variables, pero componiendo la variable URL de otra forma form + ‘?utm_medium=<?=$ utmMedium?>&utm_source= <?=$ utmSource?> etc etc 



    Metiendo código javascript en el FORM y redirigiendo el iframe a sí mismo + las variables UTM 

     

    Puede resultar algo sobrecargado y si tienes muchos formularios, puede de hecho sobrecargar la página, pero una vez que lo tienes implantado, es una solución relativamente sencilla para replicarla en cualquier web con pardot e iframes que gestiones, nosotros como agencia es algo que no es útil y usamos. 

     

     

    Paso 1. Google Tag Manager

     

    Almacenamos a través de Google Tag Manager en una cookie la información de los UTM entren en la página que entren en la web (ahí puedes jugar con la duración de la misma, si quieres asignar ese origen, aunque haya pasado un mes siempre y cuando el lead durante ese periodo no se haya generado, puedes poner la caducidad de la misma a 1 mes).

     

     

    Paso 2. Código para iFRAME 

     

    Comprobamos que es un iframe y que todavía no tiene variables UTM 

    Recuperamos la información de esa cookie o cookies (según el gusto por las galletitas). Aquí os dejamos una función tipo: 

    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 ""; 

    } 

     

    Componemos la URL y finalmente hacemos la auto-redirección del iFRAME (comprobando previamente si debemos añadir símbolo ? O & en función de si la URL ya venía con algún parámetro (a veces se añaden para pre-alimentar campos del formulario, típicamente campos ocultos). 

     

    if (urlParams !== '') {         

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

    } 

     

     

    En conclusión, no es fácil capturar a veces los UTM, pero de una forma u otra al final se llega al destino deseado, elige la que más se te adapta, o seguro que se te ocurra una más novedosa, funcional y elegante. A nosotros por ahora, con estos sistemas hemos salvado este problema y nuestros clientes tienen esa información en su base de datos para poder sacar el máximo partido a sus campañas. 

     

     


    Si te ha gustado este artículo, también podrían interesarte:

    Encuesta marketing automation

    Si te ha gustado este artículo, ¡compártelo!


    Temática: Salesforce Pardot