Ember template and Google AdSense

Question

What is the appropriate way to include a Google AdSense banner in an Ember (Handlebars) template? Say I have a template for a view that looks like this:

<script type="text/x-handlebars" data-template-name="myPageWithBanner">
  <div id="mainContent"> 
    Lorem ipsum main content
  </div>
  <div id="banner">
    //Normally I would insert a script tag here, but that is not possible
  </div>
</script>

Do I need to do this from code using pre-compiled templates, or is there a way I am not aware of?

Answer 1

I don't have a Google AdSense account, so I can't test this. But there are several major problems here:

1. You can't include a <script> tag inside a Handlebars template, not even if you use CDATA.
2. Google AdSense requires the AdSense JavaScript to appear verbatim in your page, or it's a TOS violation.
3. According to this StackOverflow answer, AdSense on AJAX sites is poorly supported at the moment.
4. The Google AdSense crawler won't be able to see any content on your page, so I doubt that ad-targeting is going to work. But see below for some things which might help crawlers.

But I'm going to assume, for the sake of simplicity, that you can discuss TOS issues directly with Google, and I'll just try to solve the technical problems. First, based on this StackOverflow answer, here's one possible solution that allows you to serve up Google's script verbatim:

<script type="text/x-handlebars">
    <h1>Ember AdSense</h1>
    {{outlet}}
    <div id="ads"></div>
</script>

<script type="text/x-handlebars" data-template-name="index">
    <p>Hello, world!</p>
</script>

<div id="ads-load" style="display: none">

<!--
  Apparently this needs to appear verbatim, exactly as Google gave it to
  you, or it's a TOS violation.
-->

<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXX";
/* Test Ad */
google_ad_slot = "XXXXXX";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

Then when our main template loads, we use jQuery to move the ads into our application template:

window.App = Ember.Application.create();

// Explicitly declare the view class for our application view.
App.ApplicationView = Ember.View.extend({
    // Called once the view is rendered.
    didInsertElement: function () {
        $('#ads-load').appendTo("#ads").css("display", "block");
    }
});

As for allowing the Google crawler to see you content, Google has official advice for AJAX applications, but I don't know whether that works with the AdSense crawler. Alternatively, if you're using pushState to update your displayed URLs, then you need to make sure that each of those URLs can be rendered by your server when requested by a crawler. (The Discourse forum software does exactly this.)

Please let me know if it gets you any closer.