7

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?

Johan
  • 780
  • 7
  • 22

1 Answers1

3

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.

Community
  • 1
  • 1
emk
  • 60,150
  • 6
  • 45
  • 50
  • It does not seem to work. The script tag is inserted in the correct div, but it does not seem to be enough to trigger it to load the banner. – Johan Apr 09 '13 at 12:49
  • I just updated it with new code based on another StackOverflow answer. Does this get you any closer? Also note that AdSense isn't going to be able to see your page content. There are some suggested solutions here: http://stackoverflow.com/questions/10834751/adsense-with-ajax – emk Apr 09 '13 at 14:52
  • I actually think I will let the AdSense ad be in a div that is not handled by Ember (ie a static one). This will both keep me from violating TOS and get rid of the problem of dynamically adding the banner. I do believe your answer will be the correct one for other uses cases though, so I'll give you answer credit. – Johan Apr 10 '13 at 12:44