I've already tried to put it as custom directive, but JS reject script tag in any strings (unterminated literal string). Also, vue-google-adsense and vue-adsense plugins doesn't work for me, because they don't get all parameters that Adsense gives, so ads becomes not responsive etc.
In the index.html
file, add the adsense code out of the #app :
<div id="app"></div>
<div id="divadsensedisplaynone" style="display:none;">
<!-- put here all adsense code -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxx"
data-ad-slot="xxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
In your main App.vue
or any Vue file, add this where you want the ad to be shown (you are free to change the style) :
<div id="adsgoeshere" style="background: #1d1f29; padding-top:60px; text-align: center;" v-html="adsenseContent"></div>
In the data
add :
adsenseContent: ''
Finally, in the mounted
function, add :
this.adsenseContent = document.getElementById('divadsensedisplaynone').innerHTML
And that's it ! You don't need any library.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With