Carbon Ads · Nuxt 脚本

Carbon Ads 是一种广告服务，提供了一种性能友好的方式在您的网站上展示广告。

Nuxt 脚本提供了一个无头 ScriptCarbonAds 组件，用于在您的 Nuxt 应用程序中嵌入 Carbon Ads。

ScriptCarbonAds

ScriptCarbonAds 组件的工作方式不同于其他 Nuxt 脚本组件，它不依赖于 useScript，而是简单地将一个脚本标签插入到组件挂载时的 div 中。

默认情况下，该组件使用 CarbonAds 最佳实践，即在挂载时立即加载。如果您想在特定事件上加载广告，可以使用元素事件触发器。

<template>
  <ScriptCarbonAds
    serve="..."
    placement="..."
  />
</template>

处理广告拦截器

您可以使用这些钩子在 CarbonAds 被阻止时添加一个备用方案。

<template>
  <ScriptCarbonAds
    serve="..."
    placement="..."
  >
    <template #error>
      <!-- Fallback ad -->
      Please support us by disabling your ad blocker.
    </template>
  </ScriptCarbonAds>
</template>

添加 UI

该组件呈现为无头，这意味着没有继承样式。如果您想自定义广告的外观，可以使用来自 nuxt.com 的示例。

<template>
  <ScriptCarbonAds
    class="Carbon border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-white/5"
    serve="..."
    placement="..."
  />
</template>

<style lang="postcss">
/* Credits to nuxt.com */
.dark .Carbon {
  min-height: 220px;
  .carbon-text {
    @apply text-gray-400;

    &:hover {
      @apply text-gray-200;
    }
  }
}

.light .Carbon {
  .carbon-text {
    @apply text-gray-600;

    &:hover {
      @apply text-gray-800;
    }
  }
}

.Carbon {
  @apply p-3 flex flex-col max-w-full;

  @screen sm {
    @apply max-w-xs;
  }

  @screen lg {
    @apply mt-0;
  }

  #carbonads span {
    @apply flex flex-col justify-between;

    .carbon-wrap {
      @apply flex flex-col;

      flex: 1;

      @media (min-width: 320px) {
        @apply flex-row;
      }

      @screen lg {
        @apply flex-col;
      }

      .carbon-img {
        @apply flex items-start justify-center mb-4;

        @media (min-width: 320px) {
          @apply mb-0;
        }

        @screen lg {
          @apply mb-4;
        }
      }

      .carbon-text {
        @apply flex-1 text-sm w-full m-0 text-left block;

        &:hover {
          @apply no-underline;
        }

        @media (min-width: 320px) {
          @apply ml-4;
        }

        @screen lg {
          @apply ml-0;
        }
      }
    }
  }

  img {
    @apply w-full;
  }

  & .carbon-poweredby {
    @apply ml-2 text-xs text-right text-gray-400 block pt-2;

    &:hover {
      @apply no-underline text-gray-500;
    }
  }
}
</style>

组件 API

有关完整的 props、事件和插槽，请参阅外观组件 API。

注意：Carbon Ads 脚本 *不* 扩展 useScript 组合式函数。访问脚本将返回 HTMLScriptElement。

Props

ScriptCarbonAds 组件接受以下 props

serve: Carbon Ads 提供的服务 URL。
placement: Carbon Ads 提供的展示位置 ID。

Nuxt 钩子

使用 Nuxt 钩子扩展 Nuxt 脚本模块。

Google Adsense

在您的 Nuxt 应用程序中展示 Google Adsense 广告。