在单个发布者页面上提供多个广告小部件

Serving multiple ad widgets on a single publisher page

本文关键字：小部 发布者 单个      更新时间：2023-09-26

我的主要问题是由于脚本在加载DOM之前运行，并且我不能使用document.ready事件。有关更多详细信息，请阅读更多

我正在制作一个广告服务应用程序。我制作了一个小代码片段，将提供给出版商，添加到他们的网站上以加载我们的广告。相同的样本如下：

<div class="my-widget" data-widgetId="1" data-page-url="http://foo.bar/" ></div>
<script src="http://myadserver.exp/js/widget.js"></script>

HTMLdiv是脚本在其下方显示广告的地方。这个脚本还包含验证在该分区中添加和填充广告的方法

var adDiv = document.getElementsByClassName('my-widget')[0];
insertScriptWithSouce('http://myadserver.exp/serve.php?id=' + adDiv.dataset.widgetId);
function fillAds(htmlFromserver) {
    adDiv.innerHTML = htmlFromServer;
}

这只是理解场景的一个例子

现在我的问题是，如果发布者在同一页面上添加多个小部件

那个代码看起来像

<div class="my-widget" data-widgetId="1" data-page-url="http://foo.bar/" ></div>
<script src="http://myadserver.exp/js/widget.js"></script>
<div class="my-widget" data-widgetId="2" data-page-url="http://foo.bar/" ></div>
<script src="http://myadserver.exp/js/widget.js"></script>

没有任何他自己的html

现在，来自第二个小部件的广告被放置在第一个小部件中，第二个部件保持为空
我也尝试过许多类的循环，但当每个脚本运行时，它不知道下面还有另一个小部件，因为它还没有加载到DOM中

注意：我不能使用id和jQuery，因为它被老年人禁止我也不能使用document.ready事件，因为如果文档无法加载，那么我的广告将不会提供

不要有多个脚本块，只需有一个脚本引用，它会循环通过页面上的广告容器div。

function fillAd(htmlFromServer, widgetId) {
    var adDivQuery = document.querySelectorAll('[data-widgetId="' + widgetId + '"]');
    if (adDivQuery.length > 0) {
        adDivQuery[0].innerHTML = htmlFromServer;
    }
}
var adDivs = document.getElementsByClassName('my-widget');
for (var i=0, il=adDivs.length; i<il; i++) {
    insertScriptWithSource('http://myadserver.exp/serve.php?id=' + adDivs[i].dataset.widgetId);
}

在这种情况下，insertScriptWithSource()函数插入的脚本将向fillAd()函数传递第二个参数，该参数具有最初传递给它的小部件ID。

没有任何解决方案，但仍然找到了最好的方法，所以我认为它可能会帮助其他人

此javascript可用于解决方案

var adDiv = document.querySelectorAll('my-widget:not([id])');
adDiv = adDiv[0];
adDiv.id = 'my-id' + (Math.random() * 100).toFixed(0);
insertScriptWithSouce('http://myadserver.exp/serve.php?id=' + adDiv.dataset.widgetId + '&origId=' + adDiv.id);
function fillAds(htmlFromserver, idSentFromHere) {
    adDiv = document.getElementById(idSentFromHere);
    adDiv.innerHTML = htmlFromServer;
}
相关文章：