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.
-
Have a look here, maybe it can help: stackoverflow.com/questions/6197768/…Ren– Ren2019-02-17 11:31:00 +00:00Commented Feb 17, 2019 at 11:31
-
Thank you, but I've seen it before :(Andrew Rusinas– Andrew Rusinas2019-02-17 18:39:06 +00:00Commented Feb 17, 2019 at 18:39
-
I used vue-meta and it works great for me. Article: the-koi.com/projects/…alexcodes– alexcodes2022-02-23 13:19:06 +00:00Commented Feb 23, 2022 at 13:19
Add a comment
|
2 Answers
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.
7 Comments
Andrew Rusinas
It throws this:adsbygoogle.js:1 Uncaught H message: "adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=0" :(
JeffProd
Try with a banner non responsive but fixed size like horizontal banner 320x50
Andrew Rusinas
Probably it will work, but I need responsive ad. I tried to make style of divadsensedisplaynone div equal to "visibility: hidden", and it started to work! Buuut... I had two banners - one on the top of the page, and one in place where I added it :D I am close to giving up with this because I lost at least two days on it. This is stupid
JeffProd
I spent a lot of time too. I don't understand why adsense JS code is so poor with many document.write() and no Vue.JS support. Sorry it doesn't work for you.
zeros-and-ones
This is not the type of hack I'm looking for.
|
This is what I got working for me in vue3.
<template>
<div id="ad-container"></div>
</template>
<script>
export default {
name: 'AdComponent',
mounted() {
this.loadAd();
},
methods: {
loadAd() {
let adContainer = document.getElementById('ad-container');
let ins = document.createElement('ins');
ins.className = 'adsbygoogle';
ins.style.display = 'block';
ins.setAttribute('data-ad-client', 'ca-pub-xxxxxx');
ins.setAttribute('data-ad-slot', 'xxxxxx');
ins.setAttribute('data-ad-format', 'auto');
ins.setAttribute('data-full-width-responsive', 'true');
adContainer.appendChild(ins);
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
}
<script>
