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.
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
回答1:
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.