Manual Ads - Nuxt Google AdSense

While Auto Ads offer convenience, manual ad placement gives you more control over where and how ads appear on your Nuxt site. This guide will show you how to implement manual Google AdSense ads using the Nuxt Scripts module.

Implementing Manual Ads

export default defineNuxtConfig({
  modules: ['@nuxt/scripts'],
  scripts: {
    registry: {
      googleAdsense: {
        client: 'ca-pub-XXXXXXXXXX', // Your AdSense Publisher ID
      },
    },
  },
});

<template>
  <div>
    <h1>My Article</h1>
    <p>Article content goes here...</p>

    <ClientOnly>
      <ScriptGoogleAdsense
        data-ad-client="ca-pub-XXXXXXXXXX"
        data-ad-slot="YYYYYYYYYY"
        data-ad-format="auto"
        data-full-width-responsive="true"
      />
    </ClientOnly>
  </div>
</template>

<script setup>
import { ScriptGoogleAdsense } from '#scripts';
</script>

<ClientOnly>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-XXXXXXXXXX"
    data-ad-slot="YYYYYYYYYY"
    data-ad-format="fluid"
    data-ad-layout="in-article"
  />
</ClientOnly>

Ad Formats

Google AdSense offers various ad formats. Here are some common ones and how to implement them:

Display Ads

auto, horizontal, vertical, rectangle, etc.

<ClientOnly>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-XXXXXXXXXX"
    data-ad-slot="YYYYYYYYYY"
    data-ad-format="auto"
    data-full-width-responsive="true"
  />
</ClientOnly>

In-Article Ads

<ClientOnly>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-XXXXXXXXXX"
    data-ad-slot="YYYYYYYYYY"
    data-ad-format="fluid"
    data-ad-layout="in-article"
  />
</ClientOnly>

In-Feed Ads

<ClientOnly>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-XXXXXXXXXX"
    data-ad-slot="YYYYYYYYYY"
    data-ad-format="link"
  />
</ClientOnly>

Multiplex Ads

<ClientOnly>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-XXXXXXXXXX"
    data-ad-slot="YYYYYYYYYY"
    data-ad-format="autorelaxed"
  />
</ClientOnly>

Best Practices

1. Use ClientOnly: Always wrap your ScriptGoogleAdsense components with <ClientOnly> to ensure they only render on the client-side.
2. Respect user experience: Don't overload your pages with too many ads. Follow AdSense policies on ad placement.
3. Responsive ads: Use responsive ad units when possible to ensure they look good on all devices.
4. Test different placements: Experiment with ad placements to find the best balance between user experience and revenue.
5. Lazy loading: Consider implementing lazy loading for ads that are not immediately visible on page load.

Troubleshooting

If your ads aren't displaying:

1. Check the browser console for any AdSense-related errors.
2. Verify that your ad unit IDs are correct.
3. Ensure your site is approved and compliant with AdSense policies.
4. For more help, refer to the Troubleshooting guide.

Performance Considerations

While manual ads give you more control, they can impact your site's performance if not implemented carefully. Consider the following:

1. Don't place too many ads above the fold.
2. Implement lazy loading for ads further down the page.
3. Monitor your site's performance using tools like Google PageSpeed Insights.

Conclusion

Manual ad placement with Nuxt Scripts gives you fine-grained control over your AdSense integration. By following these guidelines, you can effectively monetize your Nuxt site while maintaining a good user experience. Remember to always comply with AdSense policies and regularly review your ad performance to optimize your strategy.