vue3-google-adsense

vue 3 component for google adsense

demo is here

Installation

npm install vue3-google-adsense

Usage

Import the component and use it.

<template>
  <Adsense adStyle="display:inline-block;width:300px;height:300px"
           clientId="ca-pub-xxxxxxxx"
           slotId="xxxxxxxx">

  </Adsense>
</template>

<script>

  import { Adsense } from 'vue3-google-adsense';

  export default {
    name: 'Sample-AdsView',

    components:{
      Adsense
    }

  }

</script>

Usage Examples

Display Ads (Responsive)

  <Adsense adStyle="display:block"
           clientId="ca-pub-xxxxxxxx"
           slotId="xxxxxxxx"
           format="auto"
           fullWidthResponsive="true">
  </Adsense>

Display Ads (fixed)

  <Adsense adStyle="display:inline-block;width:300px;height:300px"
           clientId="ca-pub-xxxxxxxx"
           slotId="xxxxxxxx">

  </Adsense>

In-feed Ads

  <Adsense adStyle="display:block"
           format="fluid"
           layoutKey="-6t+ed+2i-1n-4w"
           clientId="ca-pub-xxxxxxxx"
           slotId="xxxxxxxx">

  </Adsense>

In-article Ads

  <Adsense adStyle="display:block; text-align:center;"
         layout="in-article"
         format="fluid"
         clientId="ca-pub-xxxxxxxx"
         slotId="xxxxxxxx">
  </Adsense>

Multiplex Ads (Responsive)

  <Adsense adStyle="display:block"
         format="autorelaxed"
         clientId="ca-pub-xxxxxxxx"
         slotId="xxxxxxxx">

  </Adsense>

Multiplex Ads (fixed)

  <Adsense adStyle="display:inline-block;width:360px;height:800px"
         clientId="ca-pub-xxxxxxxx"
         slotId="xxxxxxxx">

  </Adsense>

Props

Contributors

Made with contrib.rocks.