Jump to content

Using Revive ad server with Nuxt js


Recommended Posts

Hello,

We are trying to use Revive ad server into a Nuxt application, but it doesn’t works properly. 


I see the banner only when the page is loaded the first time but I don’t see it anymore when navigate trough the app. 
Eventually this is due to the asynchronous nature of the app, that do not reload the page during the user navigation.

No matter how I call the external script, into the `head`, into the `body` or in a plugin not served server side, it still do not work during navigation.
Do you have any suggestion in order to make Revive ad server in Nuxt work properly?

Here an example of the component

```

<template>
  <aside ref="ins-box" class="ads">
    <ins
      :data-revive-zoneid="zoneId"
      :data-revive-id="adServerId"
    />
  </aside>
</template>

<script>
export default {
  name: 'Advertising',
  props: {
    zoneId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      adServerId: 'the-ad-server-id'
    }
  },
  head () {
    return {
      script: [
        {
          hid: 'ad-server',
          src: 'https://servedby.revive-adserver.net/asyncjs.php',
          async: false,
          defer: true,
          callback: () => {
            console.log('revive-adserver script loaded ' + this.zoneId)
          }
        }
      ]
    }
  }
}
</script>

```

Link to comment
Share on other sites

  • 2 weeks later...

Hi,

I successfully use revive in a nuxt installation with server– and client-side routing. You are almost there, except some small but key things.

1. keep your reviveId in an env var (not necessary, but recommended) and register it in nuxt.config.js (see https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env)

2. Load the asyncjs.php in head():

head() {
return {
script: [
{
hid: "revive",
src: `https://your-revive-server.com/www/delivery/asyncjs.php?slug=${this.data.slug}`,
async: true,
body: true,
callback() {
reviveAsync[process.env.reviveId].apply(
reviveAsync[process.env.reviveId].detect()
);
},
}
]
}
}

You may notice, there are some differences to your code.

- append a route-specific var to the script, so that it reloads with every client-side route change
- add a callback function that calls reviveAsync[].detect() (which is an object provided by asyncjs.php)

2. In my Ad.vue component I use the zone invocation tag – and also provide a set of dynamic key value pairs as site variables (attributes is a computed property returning an object of key-value pairs, reviveId is a computed property returning the reviveId env var):

<ins
:data-revive-zoneid="zone"
:data-revive-id="reviveId"
v-bind="attributes"
></ins>

Hope this helps.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...