Google AdWord Example to haml - haml

Question

Given this example: https://support.google.com/adwords/answer/3207306?hl=en&rd=1
How would I convert the code listed under the "Troubleshooting your code snippet" section to haml?
The closest I've come is:
%script{:type=>"text/javascript"}
:cdata
var google_conversion_id = 123456789;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "AAAAAAAAAAAAAAAAAAA";
var google_conversion_value = 0;
var google_remarketing_only = false;
%script{:type => "text/javascript", :src => "//www.googleadservices.com/pagead/conversion.js"}
%noscript
%div{:style => "display:inline;"}
%img{:height => "1", :width => "1", :style => "border-style:none;", :alt => "", :src => "//www.googleadservices.com/pagead/conversion/123456789/?value=0&label= AAAAAAAAAAAAAAAAAAA&guid=ON&script=0".html_safe}
The problem with above is the :cdata tag produces:
<script type="text/javascript">
<![CDATA[
var google_conversion_id = 123456789;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "AAAAAAAAAAAAAAAAAAA";
var google_conversion_value = 0;
var google_remarketing_only = false;
]]>
</script>
And not:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "AAAAAAAAAAAAAAAAAAA";
var google_conversion_value = 0;
/* ]]> */
</script>
Is there a way to explicitly declare the CDATA tag? Or is Google not that picky about it?

Answer 1

You can escape / in haml with a \ at the beginning of the line. I had the same issue and the following worked for me to include the google adwords conversion tracking code in our site:
<script type="text/javascript">
\/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "AAAAAAAAAAAAAAAAAAA";
var google_conversion_value = 0;
\/* ]]> */
</script>
which after haml processing turns into:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "AAAAAAAAAAAAAAAAAAA";
var google_conversion_value = 0;
/* ]]> */
</script>

Answer 2

After haggling with many variations of the above, I finally "cheated" and just used the :plain tag to get it exactly the way I wanted. The code below exactly replicates what was on the Google Analytics example page, and the Google Tag Assistant plugin for Chrome confirms that it's coming through properly. Note: I also had to change the googleadservices link to HTTPS so that it would match the rest of my page (that was causing other problems that were hard to chase down, and Tag Assistant helped to sort it out).
This should do it for you:
%script{:type=>"text/javascript"}
:plain
/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "AAAAAAAAAAAAAAAAAAA";
var google_conversion_value = 0;
var google_remarketing_only = false;
/* ]]> */
%script{:type => "text/javascript", :src => "https://www.googleadservices.com/pagead/conversion.js"}

Answer 3

The CDATA tag isn’t really needed in HTML. The intention is that it allows the use of things like literal < in the javascript without having to escape them. CDATA sections are sometimes used with XHTML, but even then XHTML is usually treated as HTML by the browser.
With Haml, you could use the :javascript filter for blocks like this. That will add the CDATA section if your document format is XHTML, and leave it out otherwise. It will also omit the type attribute if the format is HTML5, since the default is text/javascript in that case.
So:
:javascript
var google_conversion_id = 123456789;
// etc ...
Will produce this when the format is HTML5 (the default)
<script>
var google_conversion_id = 123456789;
// etc ...
</script>
and this when the format is XHTML:
<script type='text/javascript'>
//<![CDATA[
var google_conversion_id = 123456789;
// etc ...
//]]>
</script>
Note that this uses // comments for the CDATA markers rather than /* ... */ that the Google page suggests, but this shouldn’t matter.