在 VueJS v2 中使用 Ezoic(或 Adsense)

分享于2022年07月17日 adsense javascript vue.js vuejs2 问答
【问题标题】:在 VueJS v2 中使用 Ezoic(或 Adsense)(Using Ezoic (or Adsense) with VueJS v2)
【发布时间】:2022-04-12 15:30:29
【问题描述】:

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

https://pagead2.googlesyndication.com/pagead/show_ads.js show_ads.js:53 无法在“文档”上执行“写入”:不是 可以从异步加载的文档中写入 外部脚本,除非它被显式打开。

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

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

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

  • 您找到解决方案了吗?我对 Next.JS 和 Ezoic 也有类似的问题。
  • 我的 解决方案 是使用多个 Vue 实例。这无论如何都不理想,这意味着我需要用 jQuery/vanilla JS 替换某些功能。您可以通过将它们投射到“窗口”上来在 Vue 实例之间进行引用,这很有帮助。更详细地说,您可以将广告代码放置在 Vue 实例之外(例如,在
    之外)
  • 很遗憾,我需要将整个 Vue 应用程序分成两半才能插入广告。我希望 Ezoic 能够更好地控制触发广告填充。通过 CDN 注入代码坦率地说是一种垃圾解决方案。如果我有时间,我想尝试的是在 Vue 挂载事件期间获取注入的代码并手动应用它。
  • 我知道这是旧的,但您是否尝试在加载占位符 dom 元素后使用 ezstandalone.define() 函数定义占位符?
  • @DynamicRemo 已发布答案。这有点特定于我的用例,但应该让您了解整个过程。

【解决方案1】:

Dynamic Remo 的要求,我正在提交与 Vue 兼容的 Ezoic 独立实现的答案。

然而,我会以他们绝对讨厌你以这种方式安装它并且基本上拒绝支持它作为开头。 - 话虽如此,您可以更好地控制放置

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


在您的 vue 组件中,您需要创建所有 id 为“ezoic-pub-ad-placeholder-xx”的占位符元素,其中 xx 替换为 enzoic 仪表板中的实际 id。只要 ezoic 中存在匹配的 id,动态创建就可以工作,因此您有两种选择:

动态:

标准:

要在占位符中实际显示广告,您可以使用我编写的这个函数。组件挂载后调用即可。

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 中,因为每条路由都有一个自定义占位符列表。

希望这会有所帮助!

  • 谢谢@user10012,非常感谢。那么 ezoic() 和 addPlaceholderOnce() 这两个函数是在 Vue 组件中,还是在 Component Init Constructor 上?正确的?将尝试在我的 Angular 应用程序中调整类似的概念。最后,EPMV、CPM 有没有改善?最近好吗?再次感谢<3
  • 更正那些需要在创建组件时运行的内容。 this.$nextTick 回调中的命令需要在整个 dom 加载后执行。我不确定 Angular 的版本是什么,但 nextTick 可以在 vue 中使用。就 EPMV 改进而言,我在比较之前没有任何东西,但我的 Ezoic 代表说它在可比网站中处于高端,并且在过去一个月里一直在增加(连同我的流量)。
  • 是的,将它放在 NgOnInit 中,该 NgOnInit 在组件初始化并且可以工作时执行;广告正在展示。谢谢你……因为你是我的专家;您如何处理同意管理对话框?对于 TCF 2.0,我还找不到任何有用的资源。在此先感谢:-)
  • 嘿@user10012 与您作为 Ezoic 的出版商伙伴联系;因为你是我发现的唯一一个基于 JS 的设置有点相似的人(我的是 Angular+Node)。随着时间的推移,每千次展示费用和收入是否有所提高?因为在您的指导下,我的广告现在正在展示,并且我的 Quantcast CMP 也可以正常工作......但即使在两周后,与我的旧广告商相比,收入仍然可以忽略不计。你觉得值得等待吗?并继续使用 Ezoic?再次提前感谢:-)
  • 嗨@user10012,我已经尝试实施您的解决方案并且它有点工作,但广告可能需要长达 4-5 秒才能出现,并且看起来它们被重新加载一次或两次(也我在我的网站控制台中看到很多错误)。我需要做任何额外的步骤吗?例如禁用其他集成 (cloudflare)。