vue3-google-adsense

vue 3 component for google adsense

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

| Attribute | Default | Origin adsense tag | Required | |-----------|--------------------|----------------------------|----------| | clientId | | data-ad-client | true | | slotId | | data-ad-slot | true | | adStyle | display: block | style | fasle | | format | empty String ('') | data-ad-format | false | | fullWidthResponsive | false | data-full-width-responsive | false | | layoutKey | empty String ('') | data-ad-layout-key | false | |layout| empty String ('') | data-ad-layout | false |