使用Ezoic(或Adsense)与VueJS v2

我有一个新版本的网站使用VueJS v2（以前的一个没有）。主要代码放在<div id="app"></div>和Vue启动。问题是我与一个广告公司称为Ezoic的合作伙伴，通过使用人工智能注入广告到页面上，但这些广告没有显示正确。我相信这是与以下错误有关：
https://pagead2.googlesyndication.com/pagead/show_ads.js show_ads.js：53无法在“文档”上执行“写入”：除非显式打开文档，否则无法从异步加载的外部脚本写入文档。
伊索克与谷歌广告交换，所以我相信这是上述行的相关问题。
我想知道，有没有什么方法可以让我的应用程序与Edozio/Adsense兼容？我想让Vue只出现在需要的地方，而不是整个页面（<div id="app"></div>从主体的开头到主体的结尾），但这意味着我需要运行multiple Vue instances，因为我在顶部（搜索框）和整个页面都有组件。
我没有访问代码，该中生代注入到网页上，因为这是在他们的结束（我的网站使用他们的DNS，他们修改响应之前发送给访问者，包括广告代码）.中生代团队也有一个调查这个问题目前，但任何信息，我可以沿着可能是有帮助的！

应Dynamic Remo的要求，我提交了一份与Vue兼容的Esozio独立实施的答案。

然而，我会在前言中说，他们绝对讨厌它，当你这样安装它，并基本上拒绝支持它。-与此同时，你有更多的方式控制放置 *

解决方案：首先在自定义根元素之外的某个位置添加以下脚本标记。

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

在您的vue组件中，您需要创建所有占位符元素，其id为“ezoic-pub-ad-placeholder-xx”，其中xx被替换为在enzoic Jmeter 板中找到的实际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中，因为每个路由都有一个自定义的占位符列表。
希望这能有所帮助！

使用Ezoic(或Adsense)与VueJS v2

1条答案

相关问题

热门标签

最新问答