How can we insert the DTM "appmeasurement" scripts into the Wufoo form's iFrame so that we can collect form related data/analytics?

[dariusd91806962]

We are using the Wufoo form service to create forms. As such we're using iFrames to inject the Wufoo forms on our site. How can we insert the DTM "appmeasurement" scripts into the Wufoo form's iFrame so that we can collect form related data/analytics?

Please note that due to the fact that we're using a 3rd party service, we do not have the ability to inject any code into the actual Wufoo Form page.

--iFrame Code Example--<iframe height="1195" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none"  src="https://example.wufoo.com/embed/a9a99aaaaaaa999/"><a href="https://example.wufoo.com/forms/a9a99aaaaaaa999/">Fill out my Wufoo form!</a></iframe>

We also have a a means to use javascript

--JavaScript Code Example--

<div id="wufoo-a9a99aaaaaaa999"> Fill out my <a href="https://example.wufoo.com/forms/a9a99aaaaaaa999">online form</a>. </div> <script type="text/javascript">var a9a99aaaaaaa999;(function(d, t) { var s = d.createElement(t), options = { 'userName':'example', 'formHash':'a9a99aaaaaaa999', 'autoResize':true, 'height':'1195', 'async':true, 'host':'wufoo.com', 'header':'show', 'ssl':true}; s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js'; s.onload = s.onreadystatechange = function() { var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return; try { a9a99aaaaaaa999 = new WufooForm();a9a99aaaaaaa999.initialize(options);a9a99aaaaaaa999.display(); } catch (e) {}}; var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr); })(document, 'script');</script>

[ParitMittal · Accepted solution]

Hi ,

You just need to add the same DTM code (that you have on parent page) to iframe page/form.

Please note that using this approach will fire multiple server calls .Hence 

You'll need to suppress one by adding this to your tool custom code, that was kindly provided by Adobe:

var isInIframe = (parent !== window)
if(isInIframe ){
return false; //this will prevent the Adobe Analytics tool to send a pageview image
request
}else{
return true; //this will allow the Adobe Analytics tool to send a pageview image
request
}

Thanks & Regards

Parit Mittal

[dariusd91806962]

Thanks Parit, I will give this a try.

so In a nutshell I will add the DTM code as follows.

1. <iframe height="1195" allowTransparency="true" frameborder="0" scrolling="no"
2. <DTM header code here>
3. style="width:100%;border:none"  src="https://example.wufoo.com/embed/a9a99aaaaaaa999/"><a
4. href="https://example.wufoo.com/forms/a9a99aaaaaaa999/">Fill out my Wufoo form!</a>
5. <DTM footer code here>
6. </iframe>

If this is not right, please advise.

Thank you

Darius Dempsey

1.  

[ParitMittal]

Hi , 

You can go ahead and put the code in the iframe.

Thanks & Regards

Parit Mittal