Integration adzone in vuejs-application

[iparker]

Hello,

what is the best way to integrate an adzone in a vuejs application? 

Which kind of snippet/code of banner invocation is the best way?

How can I handle a new banner-request when clicking inside the vuejs single page application?

Thanks for some help!

Best regards,

Timo

[iparker]

I tried to create a simple component for the banner invocation code like this:

<template>
  <div class="d-flex justify-center">
    <!-- Ad-Server Asynchronous JS Tag - Generated with Revive Adserver v5.0.2 -->
    <ins
      :data-revive-zoneid="reviveZoneId"
      :data-revive-id="reviveId"
      data-revive-target="_blank"
    ></ins>
    <script
      async
      src="//adserver-url/asyncjs.php"
    ></script>
  </div>
</template>

<script>
  export default {
    name: 'JobListingBanner',
    props: {
      reviveZoneId: {
        type: String,
        required: true,
      },
      reviveId: {
        type: String,
        required: true,
      },
    },
    mounted: function () {
      console.log('Banner Mounted!');
    },
  };
</script>

<style scoped></style>
 

But this does not work correctly. The banners are loaded the first time, but when I paginate through a listing the banners disappear. 

I tried to rerender the vue component but this also not works.

Maybe the problem is the asynch js? 

Hope you can help me with this!

Best regards,

Timo

[simoneAD]

On 1/14/2021 at 9:35 PM, iparker said:

Hello,

what is the best way to integrate an adzone in a vuejs application? 

Which kind of snippet/code of banner invocation is the best way?

How can I handle a new banner-request when clicking inside the vuejs single page application?

Thanks for some help!

Best regards,

Timo

we are running in to the same issue, we are trying to use revive in a NuxtJS app. We experience the exact same behavior as you have here.

were you able to fix it? 

Thanks,
S.

[le_fever]

There is a workaround which solved the same issue for me:

See: https://github.com/revive-adserver/revive-adserver/issues/725

 

Basically:

Run this code after you change the view in SPA.
reviveAsync.{your-data-revive-id}.apply(reviveAsync.{your-data-revive-id}.detect());

 

I made a Vue Component which calls this function in it's mount hook.

 

<template>

<div>

  <ins :data-revive-zoneid="zoneId" :data-revive-id="reviveId" data-revive-target="_blank"></ins>

  <component is="script" src="https://revive.sonares.org/www/delivery/asyncjs.php" async></component>

</div>

</template>

 

<script>

 

export default {

  name: 'ReviveAd',

  props: {

    zoneId: Number,

    reviveId: String

  },

  mounted() {

    this.reviveRefresh()

  },

  methods: {

    reviveRefresh() {

      console.log("revive refresh")

      if (window.reviveAsync) window.reviveAsync[this.reviveId].apply(reviveAsync[this.reviveId].detect())

    }

  }

}

</script>