Using Ezoic (or Adsense) with VueJS v2

Question

我的网站有一个新版本，它使用VueJS v2(上一个版本没有(。主代码被放置在<div id="app"></div>中，Vue被启动。问题是，我与一家名为Ezoic的广告公司合作，该公司通过使用人工智能在页面上注入广告，但这些广告没有正确显示。我相信这与这些错误有关：

https://pagead2.googlesyndication.com/pagead/show_ads.jsshow_ads.js:53无法对"Document"执行"write"：它不是可以从异步加载的写入文档外部脚本，除非它被显式打开。

Ezoic与谷歌广告交易所合作，所以我相信这是与问题有关的。

我想知道，有没有什么方法可以让我的应用程序与Ezoic/Adsense兼容？我曾想过只在需要的地方让Vue出现在页面上，而不是整个页面(<div id="app"></div>从正文的开头到正文的结尾(，但这意味着我需要运行多个Vue实例，因为我在顶部(搜索框(和整个页面都有组件。

我无法访问Ezoic注入页面的代码，因为这是在他们端完成的(我的网站使用他们的DNS，他们在发送给访问者之前修改响应，以包括广告代码(。Ezoic团队目前也在调查这个问题，但我能传递的任何信息都可能有帮助！

Answer 1

应Dynamic Remo的请求，我提交了一份与Vue兼容的Ezoic独立实现的答案。

然而，我会用他们绝对讨厌它作为序言，当你以这种方式安装它时，他们基本上拒绝支持它。-也就是说，你对放置有更多的控制

解决方案：首先在您的自定义根元素外部添加以下脚本标记。

<script type="text/javascript" src="//www.ezojs.com/ezoic/sa.min.js" async=""></script>

在你的vue组件中，你需要创建所有id为"的占位符元素；ezoic pub广告占位符xx"；其中xx被您的enzoic仪表板中的实际id所取代。只要ezoic中有匹配的id，动态创建就可以工作，所以你有两个选项：

动态：

<div v-for="placeholderId in ezoicArray" :id="'ezoic-pub-ad-placeholder-' + placeholderId" class="ezoic"></div>

标准：

<div id="ezoic-pub-ad-placeholder-102" class="ezoic"></div>

为了在你的占位符中实际显示广告，你可以使用我写的这个功能。只要在安装组件时调用它即可。

ezoic(placeholderList) {
if (window.ezstandalone !== undefined) {
window.ezoicPlaceholderArray = window.ezoicPlaceholderArray || [];
// Add Placeholders to Array
placeholderList.forEach((placeholder) => {
this.addPlaceholderOnce(window.ezoicPlaceholderArray, placeholder);
});
// Enable Once - Refresh on Change
window.ezoicRefreshed = false;
window.ezoicEnabled = window.ezoicEnabled || false;
// Next Tick Ensures All Enzoic Blocks Are Loaded
this.$nextTick(() => {
// On First Load We Must Enable
if (!window.ezoicEnabled) {
window.ezstandalone.define(window.ezoicPlaceholderArray);
window.ezoicPlaceholderArray = null;
console.log('ezoic defined and array reset');
window.ezstandalone.enable();
console.log('ezoic enabled');
window.ezstandalone.display();
console.log('ezoic displayed');
window.ezoicEnabled = true;
window.ezoicRefreshed = true;
}
// On Refresh We Have To Destroy & Refresh
if (!window.ezoicRefreshed) {
window.ezstandalone.destroy();
console.log('ezoic destroyed');
window.ezstandalone.define(window.ezoicPlaceholderArray);
window.ezoicPlaceholderArray = null;
console.log('ezoic refresh defined and array reset');
window.ezstandalone.refresh();
console.log('ezoic refreshed');
window.ezoicRefreshed = true;
}
});
} else {
console.log('Error: Missing Ezoic Standalone');
}
},
addPlaceholderOnce(array, placeholder) {
if (!array.includes(placeholder)) {
array.push(parseInt(placeholder));
console.log('ezoic-pub-ad-placeholder-' + placeholder + ' - Created');
}
},

如果由于不同的原因需要更改占位符设置，就像我所做的那样，只需将window.ezoicRefreshed = false;添加到适当的生命周期挂钩中。在我的例子中，我在beforeUnmount中有它，因为每条路由都有一个自定义的占位符列表。

希望这能有所帮助！