Adsense 广告在 angularjs ng-repeat 中不起作用答案

【问题标题】：Adsense ads not working inside angularjs ng-repeatAdsense 广告在 angularjs ng-repeat 中不起作用
【发布时间】：2019-12-30 21:52:08
【问题描述】：

我正在尝试将 Google Adsense 广告放入 Angularjs ng-repeat 中，如下所示。但它不起作用

<div ng-repeat="item in items"
<div ng-include src="view.getItem($index)"></div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div ng-if="$index == 0" google-adsense>
    <ins class="adsbygoogle responsive"
         style="display:inline-block;width:468px;height:60px"
         data-ad-client="ca-pub-"
         data-ad-slot=""></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>
</div>

我在控制台中看到以下错误。

Uncaught Error: adsbygoogle.push(): All ins elements in the DOM with class=adsbygoogle already have ads in them

有没有办法在 ng-repeat 中显示 adsense 广告？

【问题讨论】：

为什么要多次添加同一个脚本

标签： angularjs angularjs-ng-repeat adsense

【解决方案1】：

你可以使用指令来做到这一点

var adSenseTpl = '<ins class="ad-div adsbygoogle responsive" style="display:inline-block;width:468px;height:60px" data-ad-client="ca-pub-xxxxx" data-ad-slot="xxxxx"></ins></ins>';

angular.module('reviewmattersApp')
    .directive('googleAdsense', function($window, $compile) {
    return {
        restrict: 'A',
        transclude: true,
        template: adSenseTpl,
        replace: false,
        link: function postLink(scope, element, iAttrs) {
                element.html("");
                element.append(angular.element($compile(adSenseTpl)(scope)));
                if (!$window.adsbygoogle) {
                    $window.adsbygoogle = [];
                }
                $window.adsbygoogle.push({});
        }
    };
});

在html端

<div  google-adsense>
</div>

【讨论】：

【解决方案2】：

你也可以尝试在JS文件中创建这样的函数

function createAndAppendAdsElement(id, adUnitID) {
    var parent = document.getElementById(id);

    var ele = document.createElement('ins');
    ele.style.display = 'block';
    ele.className = 'adsbygoogle';
    ele.setAttribute('data-ad-client', 'ca-pub-XXXXXXXX');
    ele.setAttribute('data-ad-slot', adUnitID);
    ele.setAttribute('data-ad-format', 'auto');
    ele.setAttribute('data-full-width-responsive', 'true');

    parent.appendChild(ele);

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

此方法查找具有提供的 ID 的 div，然后创建一个 INS 元素并将其附加到该 div。

在窗口加载时调用此方法，如下所示：

window.onload = function () {
    createAndAppendAdsElement('elementOne', 'your_ad_unit_number');
    createAndAppendAdsElement('elementTwo', 'your_ad_unit_number');
    createAndAppendAdsElement('elementThree', 'your_ad_unit_number');
    createAndAppendAdsElement('elementFour', 'your_ad_unit_number');
    createAndAppendAdsElement('elementFive', 'your_ad_unit_number');
};

【讨论】：