Шаблон Ember и Google AdSense

Question

Каким образом можно включить баннер Google AdSense в шаблон Ember (Handlebars)? Скажем, у меня есть шаблон для вида, который выглядит следующим образом:

<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> 

Мне нужно сделать это с помощью кода скомпилированных шаблонов делать, или есть способ я не знаю?

Answer 1

У меня нет учетной записи Google AdSense, поэтому я не могу это проверить. Но есть несколько серьезных проблем здесь:

1. Вы не можете включать <script> тег внутри шаблона Рули, даже если вы не используете CDATA.
2. Google AdSense требует, чтобы JavaScript AdSense отображался на вашей странице на стенограмме, или это нарушение TOS.
3. Согласно this StackOverflow answer, сайты AdSense на AJAX плохо поддерживаются на данный момент.
4. Искатель Google AdSense не сможет видеть контент на вашей странице, поэтому я сомневаюсь, что таргетинг объявлений будет работать. Но см. Ниже некоторые вещи, которые могут помочь сканерам.

Но я просто хочу для простоты предположить, что вы можете обсуждать вопросы TOS напрямую с Google, и я просто попытаюсь решить технические проблемы. Во-первых, на основе this StackOverflow answer, вот один из возможных решений, что позволяет обслуживать скрипт Google, дословный:

<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> 

Тогда, когда наши основные нагрузки шаблона, мы используем JQuery для перемещения объявления в нашем шаблоне приложения:

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

Что касается того, что Google искатель видит вас в содержании, Google имеет official advice for AJAX applications, но I don't know whether that works with the AdSense crawler. В качестве альтернативы, если вы используете pushState для обновления отображаемых URL-адресов, вам необходимо убедиться, что каждый из этих URL-адресов может быть отображен вашим сервером по запросу искателя. (Программное обеспечение форума Дискурса does exactly this.)

Пожалуйста, дайте мне знать, если он приблизит вас.