javascript - 在 VueJS v2 中使用 Ezoic(或 Adsense)

Question

我的网站有一个新版本，它使用 VueJS v2(之前的版本没有)。主要代码放在<div id="app"></div>里面并启动 Vue。问题是我与一家名为 Ezoic 的广告公司合作通过使用 AI 将广告注入(inject)页面，但这些广告无法正常显示。我相信它与这些错误有关:

https://pagead2.googlesyndication.com/pagead/show_ads.js show_ads.js:53 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

Ezoic 与 Google Ad Exchange 合作，因此我认为与该问题相关的是上述行。

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

我无法访问 Ezoic 注入(inject)页面的代码，因为这是在他们的一端完成的(我的网站使用他们的 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-ad-placeholder-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; 添加到适当的生命周期 Hook 即可。在我的例子中，我将它放在 beforeUnmount 中，因为每个路由都有一个自定义占位符列表。

希望这对您有所帮助!