Angular.js и AdSense

Я пытаюсь разместить рекламу в своем приложении angular.js, я немного почитал и обнаружил, что невозможно просто скопировать и вставить обычный код AdSense.

Я слышал, что вы должны «обернуть это в директиву с включением», и единственный пример, который я могу найти, — это другой пост Stackoverflow: AngularJs и плагин AddThis для социальных сетей

Может ли кто-нибудь помочь дать рекомендации о том, как это сделать с помощью Google Adsense?


angularjs adsense angularjs-directive transclusion
person David Litwak    schedule 02.07.2013    source источник
comment
Привет, Дэвид, я тоже недавно изучаю Angular. Раньше я работал с этим парнем, Джоном Линдквистом (он также работал над Papervision, так я о нем и слышал изначально), так или иначе, у него есть сайт egghead.io, посвященный урокам по angular. Проверьте материал о директивах, у него есть пара коротких видеороликов, посвященных этому. Кроме того, я бы просто использовал документы как самую последнюю ссылку. Насколько я понимаю, основная проблема заключается в том, что angular будет добавлять/удалять элементы DOM, и если есть JS, который должен обрабатывать эти элементы DOM, вам нужно поместить его в директиву, чтобы он работал.   -  person shaunhusain    schedule 02.07.2013

Ответы (4)


arrow_upward
18
arrow_downward

вам нужно создать директиву

yourApp.directive('ads', function() {
    return {
        restrict: 'A',
        templateUrl: 'partiels/adsTpl',
        controller: function(){
            (adsbygoogle = window.adsbygoogle || []).push({});
        }
    };
});

создайте шаблон с вашим рекламным кодом, в моем случае "partiels/adsTpl.html"

<ins class="adsbygoogle"
 style="display:inline-block;width:300px;height:250px"
 data-ad-client="ca-pub-00000000"
 data-ad-slot="000000"></ins>

добавить директиву на свою страницу

 <div data-ads></div>

поместите вызов AdSense js в раздел заголовка вашей главной страницы перед angularjs

<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
....

и вуаля, это работает отлично для меня

person zied.hosni    schedule 29.03.2014
comment
Поскольку у меня есть несколько представлений и маршрутов, он показывает только первые 3 раза, а затем не работает, пока сайт не будет перезагружен. - person Kode; 19.04.2015
comment
привет @kode, у меня есть много представлений в моем веб-приложении, но в моем случае оно работает отлично, не могли бы вы предоставить более подробную информацию. - person zied.hosni; 20.04.2015
comment
Спасибо @zied.hosni. У меня есть сообщение здесь: stackoverflow.com/questions/29709973/ Похоже, единственная разница в том, что моя директива использует replace : истинный - person Kode; 20.04.2015
comment
Добавляете ли вы директиву AdSense в свои представления? Или просто на главную страницу - person Kode; 21.04.2015
comment
Фантастический! Это именно то, что я искал, это просто и хорошо работает с AngularJs! - person Fery Kaszoni; 06.12.2017

arrow_upward
15
arrow_downward

Вы должны сделать директиву оболочки для сценария AdSense следующим образом...

<div data-my-ad-sense>
  <!-- Google AdSense -->
  <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle"
       style="display:inline-block;width:728px;height:90px"
       data-ad-client="ca-pub-0000000000"
       data-ad-slot="0000000000"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

И добавьте эту директиву в свои директивы...

directive('myAdSense', function() {
  return {
    restrict: 'A',
    transclude: true,
    replace: true,
    template: '<div ng-transclude></div>',
    link: function ($scope, element, attrs) {}
  }
})

Это асинхронный код AdSense.

person Pablo Ezequiel Leone    schedule 07.07.2013
comment
это, кажется, не работает, мои объявления выходят пустыми (но, как ни странно, все еще с загруженным iframe). есть идеи? Я использую их в ng-repeat, где у каждого 4-го элемента есть реклама. вы можете увидеть это на sparkmyinterest.com, если это поможет - person Rob; 04.12.2013
comment
это решение, кажется, работает, но когда ng-view изменен, если печать более одного ADS в ng-repeat: первый раз, когда я смотрю на представление: OK (или иногда отсутствует один или несколько ADS), НО изменение просмотреть и вернуться некоторые (или все) объявления отсутствуют - person ricricucit; 09.05.2014
comment
Это не очень хорошее решение. Обертка директивы абсолютно бесполезна. Просто говорю - person Andrew Rhyne; 16.12.2014
comment
откуда берется data-my-ad-sense? - person JohnAndrews; 25.12.2015
comment
@JohnAndrews Часть data- просто указывает настраиваемый атрибут html5 (позволяет проверить ваш html). Часть my-ad-sense — это имя директивы, определенной во втором фрагменте. - person Lykathia; 06.05.2016

arrow_upward
2
arrow_downward

Я не уверен, что следующие действия действительны в соответствии с AdSense T&C.

удалите все переменные, связанные с Google, прежде чем изменить URL-адрес

Object.keys(window).filter(function(k) { return /google/.test(k) }).forEach(
        function(key) {
            delete(window[key]);
        }
    );
person Kishore Relangi    schedule 06.10.2014

arrow_upward
0
arrow_downward

В контроллере AngularJS добавьте функцию init(), добавьте строку

(adsbygoogle = window.adsbygoogle || []).push({});

Затем вызовите эту функцию init() в HTML-файле вашего представления.

См. также
https://github.com/featen/ags/blob/master/webapp/js/controllers/dict.js

person featen    schedule 05.05.2014