Geek Answers Handbook

Ember and Google AdSense Template

How can I include the Google AdSense banner in the Ember (Handlebars) template? Say I have a presentation template 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 precompiled templates, or is there a way I don't know about?

+7
source share
1 answer

I don’t have a Google AdSense account, so I can’t verify this. But there are some serious issues here:

  • You cannot include the <script> inside the Handlebars template, even if you use CDATA.
  • Google AdSense requires JavaScript AdSense to appear on your page in a transcript, or this is a TOS violation.
  • Consistent with https://stackoverflow.com/a/2124167/167/ , AdSense on AJAX sites is poorly supported at the moment.
  • Google AdSense crawler will not be able to see any content on your page, so I doubt that advertising targeting will work. But see below for some things that can help scanners.

But I just want for the sake of simplicity to suggest that you can discuss TOS issues directly with Google, and I will just try to solve the technical problems. Firstly, based on https://stackoverflow.com/a/3/9406/ ... , here you can find one possible solution that allows you to serve Google verbatim script:

 <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 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"); } });

Regarding the fact that Google crawler sees you in the content, Google is official advice for AJAX applications , but I don’t know if this works with the AdSense crawler . Alternatively, if you use pushState to update the displayed URLs, you need to make sure that each of these URLs can be displayed by your server at the request of the crawler. (Discourse forum software does just that .)

Please let me know if he brings you closer.

+3
source

More articles:


All Articles