adsense 展示广告(创建自定义广告)

1.除了展示自动广告，也可以添加自定义广告，封装后的代码如下(仅供参考)

export const isProd = import.meta.env.MODE === 'production';

export const isMobile = function () {
  var isMobileUA =
    /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent,
    );
  var isMobileScreen = window.innerWidth <= 768;
  return isMobileUA || isMobileScreen;
};


export function createGoogleAds (containerId) {
  if (isProd) {
    const container = document.getElementById(containerId);
    if (!container) return;

    // 防重复加载
    if (container.getAttribute('data-ad-loaded') === 'true') return;

    const mobile = isMobile();
    const id = container.getAttribute('data-ad-slot');
    const ADS_ID = container.getAttribute('data-ad-client');
    const width = container.getAttribute('data-ad-width');
    const height = container.getAttribute('data-ad-height');

    const observer = new IntersectionObserver((entries) => {
      const entry = entries[0];
      if (
        entry.isIntersecting &&
        container.getAttribute('data-ad-loaded') === 'false'
      ) {
        container.setAttribute('data-ad-loaded', 'true');

        // 直接对容器（原始 ins）设置样式与属性
        if (mobile) {
          const adHeight = (100 / 1.2) + 'vw';
          container.setAttribute(
            'style',
            `display:block;margin:0 auto;width:100%;height:auto;min-height:${adHeight};`
          );
        } else {
          container.style.display = 'block';
          container.style.width = width ? width : '100%';
          container.setAttribute('data-ad-format', 'auto');
        }
        container.setAttribute('data-ad-client', ADS_ID);
        container.setAttribute('data-ad-slot', id);
        container.setAttribute('data-full-width-responsive', 'true');

        // 监听广告填充状态 - 监听容器本身
        const mo = new MutationObserver(function (mutations) {
          mutations.forEach(function (mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'data-ad-status') {
              const status = container.getAttribute('data-ad-status');
              if (status === 'unfilled') {
                // 填充失败，清理并隐藏容器以释放空间
                container.style.height = '0';
                container.style.minHeight = '0';
                container.style.margin = '0';
                container.style.padding = '0';
                container.style.display = 'none';
                // 如需完全移除节点，可改为：
                // container.remove();
              }
            }
          });
        });
        mo.observe(container, { attributes: true });

        // push 广告
        const script = document.createElement('script');
        script.innerHTML = '(adsbygoogle = window.adsbygoogle || []).push({});';
        container.appendChild(script);

        observer.unobserve(container);
      }
    }, { threshold: 0.1 });

    observer.observe(container);
  }
};

2.使用方法(从adsense 后台创建广告后,复制代码，添加一个id)

id可以用uuid生成工具，保证唯一

  <ins class="adsbygoogle"
     data-ad-format="fluid"
     data-ad-width
     data-ad-height
     data-ad-loaded="false"
     id="c6b08980b6be48a891f468c7ec32ae92"
     data-ad-layout-key="xxxxx"
     data-ad-client="xxxxx"
     data-ad-slot="xxxx"></ins>

import { createGoogleAds,isProd } from '@/utils/index'

onMounted(() => {
  if (isProd) {
    createGoogleAds('c6b08980b6be48a891f468c7ec32ae92');
  }
})

以上代码仅供参考,根据情况合理展示广告