AdsTerra横幅无法重复显示，React组件实现是否存在问题？

我正在使用AdsTerra实现网站变现，尝试在同一页面多次添加以下广告组件，但仅能显示一个广告。请问是我的实现存在问题，还是有其他正确的添加方式？

import { useEffect, useRef } from "react";

export default function AdComponent() {
  const banner = useRef();

  const atOptions = {
    key: "XXXXXXXXXXXXX",
    format: "iframe",
    height: 90,
    width: 728,
  };

  useEffect(() => {
    if (!banner.current.firstChild) {
      const conf = document.createElement("script");
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.src = `//www.profitabledisplayformat.com/${atOptions.key}/invoke.js`;
      conf.innerHTML = `atOptions = ${JSON.stringify(atOptions)}`;

      if (banner.current) {
        banner.current.append(conf);
        banner.current.append(script);
      }
    }
  }, []);

  return <div ref={banner} />;
}

问题原因 #

你的实现存在核心问题：全局变量冲突+重复脚本加载

1. 每次渲染组件时，conf.innerHTML = atOptions = ${JSON.stringify(atOptions)}都会覆盖全局的atOptions变量，导致广告脚本只会读取最后一次设置的配置，前面的组件配置被冲掉。
2. 多次加载invoke.js会触发重复初始化，AdsTerra的脚本通常不会处理这种场景，最终只有一个广告实例能正常渲染。

解决方案 #

方案1：为每个广告实例生成独立全局配置 #

修改组件，让每个实例的配置变量唯一，避免冲突：

import { useEffect, useRef, useState } from "react";

export default function AdComponent() {
  const banner = useRef();
  // 生成唯一ID区分每个广告实例
  const [uniqueAdId] = useState(`ad_${Math.random().toString(36).slice(2, 10)}`);

  const atOptions = {
    key: "XXXXXXXXXXXXX",
    format: "iframe",
    height: 90,
    width: 728,
  };

  useEffect(() => {
    if (!banner.current.firstChild) {
      const confScript = document.createElement("script");
      const adScript = document.createElement("script");
      
      // 用唯一ID命名全局配置变量
      confScript.innerHTML = `${uniqueAdId}_options = ${JSON.stringify(atOptions)}`;
      
      // 自定义广告初始化逻辑，避免依赖全局atOptions
      adScript.innerHTML = `
        (function() {
          const options = window.${uniqueAdId}_options;
          const iframe = document.createElement('iframe');
          iframe.src = \`//www.profitabledisplayformat.com/${atOptions.key}/ad.html?\${new URLSearchParams(options)}\`;
          iframe.width = options.width;
          iframe.height = options.height;
          iframe.frameBorder = 0;
          iframe.style.border = 'none';
          banner.current.appendChild(iframe);
          // 清理全局变量
          delete window.${uniqueAdId}_options;
        })()
      `;

      if (banner.current) {
        banner.current.append(confScript);
        banner.current.append(adScript);
      }
    }
  }, [uniqueAdId, atOptions]);

  return <div ref={banner} />;
}

方案2：使用AdsTerra官方多实例方案 #

优先查看AdsTerra官方文档，通常服务商提供更可靠的多广告加载方式：

• 为每个广告单元分配独立的slot ID或ad unit key
• 使用官方批量初始化API，只加载一次核心脚本，再通过API渲染多个广告
• 引入官方提供的React组件库（如果有）

临时兼容方案：延迟加载（不推荐） #

如果暂时无法调整逻辑，可以给每个组件添加随机延迟，减少配置被覆盖的概率，但稳定性差：

useEffect(() => {
  if (!banner.current.firstChild) {
    setTimeout(() => {
      const conf = document.createElement("script");
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.src = `//www.profitabledisplayformat.com/${atOptions.key}/invoke.js`;
      conf.innerHTML = `atOptions = ${JSON.stringify(atOptions)}`;

      if (banner.current) {
        banner.current.append(conf);
        banner.current.append(script);
      }
    }, Math.random() * 1200); // 0-1.2秒随机延迟
  }
}, []);

内容的提问来源于stack exchange，提问作者Cesar Richards