Skip to main content
Scripts

Carbon Ads

Copy for LLMs

Carbon Ads serves ads through a standard embed script.

Use the headless <ScriptCarbonAds> component to place one of its ads in a Nuxt page.

Carbon Ads

View source

Nuxt Config Setup

Add this to your nuxt.config.ts to load Carbon Ads globally. Alternatively you can use the false composable for more control. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      carbonAds: {
        trigger: 'onNuxtReady',
      }
    }
  }
})

This config automatically enables first-party mode (proxy). See below to customise.

First-Party Mode: Privacy Focused Proxy

No extra config needed. Runtime requests are reverse-proxied through your server instead of going directly to Carbon Ads. User IPs are anonymised and requests work with ad blockers. Learn more.

Mode
Bundle Proxy
Privacy
User IP addresses are anonymised. Other request data passes through.
export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: proxied
    registry: {
      carbonAds: {
        trigger: 'onNuxtReady',
      },
    },
  },
})

<ScriptCarbonAds>

Unlike other Nuxt Scripts components, <ScriptCarbonAds> bypasses useScript() and inserts the Carbon script into its own div.

It loads when mounted. Pass an element event trigger if the ad should wait for a specific interaction.

Carbon's placement policy requires the ad code to load only once per page and forbids modifying or self-hosting the script. Render one component for the active page. The component requests Carbon's CDN script directly, but it does not enforce the one-component limit.

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

Handling ad blockers

Use the error slot when Carbon Ads is blocked:

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

Adding UI

The component has no inherited styles. This example uses the styles from nuxt.com:

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

Component API

See the Facade Component API for full props, events, and slots.

The component's ready event receives the injected HTMLScriptElement.

servestring required
placementstring required
formatstring required
triggerElementScriptTrigger

Defines the trigger event to load the script.

Edit this page
Markdown For LLMs

Calendly

Embed Calendly bookings in your Nuxt app with inline, popup, and badge widgets.

Clarity

Load Microsoft Clarity and manage its session-recording consent state.