Application.html layout puts everything after body tag in HAML/ERB into HTML tag

Question

I'm trying to place some 3rd party script files outside of the body tag (per the 3rd party's request) in my Rails app (Rails 4.0.0, Ruby 2.1.1). I cannot get this to work for my application.html file (neither in HAML nor ERB).

HAML:

%body
   = yield
%script
  :javascript

ERB:

<body>
  <%= yield %>
</body>
<script>
  ...
</script>

Whether I use ERB or HAML, the resulting live page still puts this script tag INSIDE the body tag at the end rather than outside of it. Anyone have any insight as to whether this is Rails' behavior and if it's specific to Rails 4? Or could it be something the browser is doing outside of Rails?

Updated: application.html.haml file in question (ENV variables resolve without issue):

!!!
%html{"xmlns" => "http://www.w3.org/1999/xhtml", "xmlns:fb" => "http://ogp.me/ns/fb#"}
%head
  / several meta tags
  %title= content_for?(:title) ? yield(:title) : "Title"
  / favicon image links
  = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true
  = javascript_include_tag "application", "data-turbolinks-track" => true
  = javascript_include_tag "vendor/modernizr"
  = csrf_meta_tags
  %script{src: "//cdn.optimizely.com/js/---------.js"}
%body
  = yield
%script
  :javascript
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', "#{ENV['GA_ID']}", "#{ENV['GA_LABEL']}");
    ga('require', 'displayfeatures');
    // Optimizely Universal Analytics Integration
    window.optimizely = window.optimizely || [];
    window.optimizely.push("activateUniversalAnalytics");
    ga('send', 'pageview');

    /* <![CDATA[ */
    var google_conversion_id = ---------;
    var google_custom_params = window.google_tag_params;
    var google_remarketing_only = true;

Thanks

We would need a bit more information. Your application layout template would be a start. And then, where exactly do you want to add those scripts? Just bellow the body tag? — Marc Lainez, Aug 13 '14 at 18:26
Yes, just below the body tag. I'm expecting the resulting html to be: ... but for some reason it compiles to .... Adding culled down version of application.html.haml to OP. — DigV, Aug 13 '14 at 21:10
A 3rd party that provided code to my company is insisting upon this. However now knowing it's against HTML5 spec, I will outright pushback. — DigV, Aug 14 '14 at 16:05

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

Your html will not be valid if you put a script tag after the body. It's either in the head or the body tag. A little research can give you some explanations such as this SO question.

The HTML5 specification describes how browsers are supposed to handle errors. As you can see on the section describing the after after body insertion mode, anything that is not an html tag, comment, doctype or an end of file character will switch the browser to "in body" insertion mode.

So, in other words, your browser's implementation of HTML5 is what's putting your script tag in the body.

edited May 23 '17 at 10:33

Community

1
1

answered Aug 14 '14 at 03:32

Marc Lainez

3,070
11
16

Thank you, that makes total sense. The 3rd party was insisting on this but I can point to this spec. – DigV Aug 14 '14 at 16:04

Application.html layout puts everything after body tag in HAML/ERB into HTML tag

1 Answers1