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

Avatar

Avatar
Validate 10
Level 2
dariusd91806962
Level 2

Likes

5 likes

Total Posts

38 posts

Correct reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 2
dariusd91806962
Level 2

Likes

5 likes

Total Posts

38 posts

Correct reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile
dariusd91806962
Level 2

22-06-2016

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>

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 10
Level 10
ParitMittal
Level 10

Likes

93 likes

Total Posts

817 posts

Correct reply

349 solutions
Top badges earned
Validate 10
Validate 1
Boost 50
Boost 5
Boost 3
View profile

Avatar
Validate 10
Level 10
ParitMittal
Level 10

Likes

93 likes

Total Posts

817 posts

Correct reply

349 solutions
Top badges earned
Validate 10
Validate 1
Boost 50
Boost 5
Boost 3
View profile
ParitMittal
Level 10

23-06-2016

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

Answers (2)

Answers (2)

Avatar

Avatar
Validate 10
Level 10
ParitMittal
Level 10

Likes

93 likes

Total Posts

817 posts

Correct reply

349 solutions
Top badges earned
Validate 10
Validate 1
Boost 50
Boost 5
Boost 3
View profile

Avatar
Validate 10
Level 10
ParitMittal
Level 10

Likes

93 likes

Total Posts

817 posts

Correct reply

349 solutions
Top badges earned
Validate 10
Validate 1
Boost 50
Boost 5
Boost 3
View profile
ParitMittal
Level 10

24-06-2016

Hi , 

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

Thanks & Regards

Parit Mittal

Avatar

Avatar
Validate 10
Level 2
dariusd91806962
Level 2

Likes

5 likes

Total Posts

38 posts

Correct reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 2
dariusd91806962
Level 2

Likes

5 likes

Total Posts

38 posts

Correct reply

1 solution
Top badges earned
Validate 10
Validate 1
Boost 5
Boost 3
Boost 1
View profile
dariusd91806962
Level 2

23-06-2016

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.