Hey there, I'm new around here so please be patient with me if I make any mistakes :D So, onto my question! I have a website built with vuejs and I want to incorporate some ads into it. To do this, I have created some components:
<template>
<div class="ad-wrapper">
<div ref="ad"></div>
<div id='div-gpt-ad-1407836229438-0' ref="adGpt"></div>
</div>
</template>
<script>
export default {
name: 'Ad-top',
props: {
},
components: {
},
data() {
return {
};
},
methods: {
setAd() {
const adScript = document.createElement('script');
adScript.type = 'text/javascript';
adScript.text = `googletag.cmd.push(function() {
googletag.defineSlot('/53015287/aniflix.tv_d_970x90_1', [970, 90], 'div-gpt-ad-1407836229438-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});`;
this.$refs.ad.appendChild(adScript);
const adGptScript = document.createElement('script');
adGptScript.type = 'text/javascript';
adGptScript.text = `googletag.cmd.push(function() { googletag.display('div-gpt-ad-1407836229438-0'); });`;
this.$refs.adGpt.appendChild(adGptScript);
},
refreshAd() {
this.$refs.ad.innerHTML = '';
this.$refs.adGpt.innerHTML = '';
this.setAd();
},
},
mounted() {
this.setAd();
this.$eventBus.$on('refreshAds', () => {
this.refreshAd();
});
},
beforeDestroy() {
this.$eventBus.$off('refreshAds');
},
};
</script>
Everything seems to be working fine, except when I navigate to another page on my website, the ads don't refresh and disappear.
I attempted to simply clear the tags
refreshAd() {
this.$refs.ad.innerHTML = '';
this.$refs.adGpt.innerHTML = '';
this.setAd();
},
But unfortunately that didn't work. Does anyone have any ideas?