How to add google adsense in Vue.js component?

问题: 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 do...

问题:

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.

  • 发表于 2019-02-18 20:14
  • 阅读 ( 724 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除