1. Knowledge Base
  2. Getting started with Venatus

How to implement Venatus tags on a Single Page Application (SPA) site

Learn how to integrate Venatus tags on sites built using React, Vue, Nuxt and other SPA frameworks.

Integrating Venatus tags on sites built on SPA frameworks differs in several important ways to how Venatus tags are implemented on a non-SPA website

On this page

Step by step guide for adding Venatus tags to an SPA website

Integration Notes

Code Samples

 

 

 

 


Step by step guide for adding Venatus tags to an SPA website

Please follow the steps below:

Step 1:

Load the Venatus ad-manager.min.js script as early as possible, ensuring that it is only loaded once.

Step 2:

Structure your application to create <div> elements containing a "vm-placement" class and a data-id attribute for each ad placement on your site.  The Venatus Publisher Operations team will provide a list of data-id entries specific to each placement on your site. 

Step 3:

Push to the Venatus __vm_add queue each time you wish to render one of the placements you've set up in Step 2.  This will trigger the Venatus ad manager to render the advertisement. 

This action should be performed when the initial rendering of a placement is desired as well as if a placement had been rendered previously and then destroyed, and is desired once again.

 

<div> elements which are added to the page DOM without a corresponding call to the Venatus __vm_add queue will not render any ads

Step 4:

Push to the Venatus __vm_remove queue each time you wish to remove or destroy a placement already present on the page.  

Use case example:  You are changing the page layout and would like a header ad currently displayed on the page to no longer be shown

If the __vm_remove queue is not used, ad rendering could be visually impacted.  Ads could be partially or fully persisted on the page that are not desired, and garbage objects could remain in memory causing unpredictable behaviour to users.

 

 

 

 


Integration Notes

  • Placement IDs for Rich Media (‘1x1 tags’) are used by the Venatus ad manager to render video ads, sticky ads and/or takeover ads.
    • Tags for your Rich Media placement should be placed in an area of the page not affected by content changes if it is desired to have their ad content persisted across content change events
    • During a page change event, or other content change requiring it, Rich Media placements should be destroyed by pushing to the  __vm_remove_category = ["richmedia_all"] queue, as described above.
    • Currently, pushing a Rich Media placement to the __vm_remove_category = ["richmedia_all"] queue will remove Rich Media placements of any type from the page.  Support for requesting a specific media type for removal is planned as a future feature.
  • The Venatus ad manager will refresh banner ads every 30 seconds.  Your code should not attempt to manage ad refreshing in addition to this.
  • The Venatus ad manager will only render ads for placements that are both in-view and in-focus.

 

 

 

 

Code Samples

We currently offer officially supported code samples for React, Vue and Nuxt.  The same concepts can be applied to other SPA frameworks.

React

Simple React example

 

React live demo and application

Full demo at CodeSandbox:
https://codesandbox.io/s/charming-violet-hch94

  • This is a simple example SPA with navigation-based rendering
  • The Ad.js component is a bridge between React and the Venatus ad manager code
  • Page1.js, Page2.js and Page3.js represent pages that will be rendered during navigation
  • All Venatus ad manager code is placed within the Ad.js component 

     

    Ad.js

     

    App.js

     


    Vue

    Simple Vue example

     

    Vue live demo and application

    Note that the preview feature within CodeSandbox does not work for our Vue demo site.  The live version of our Vue demo site rendered from the CodeSandbox sample code can instead be viewed at the external URL below.

     

    Full demo at CodeSandbox:
    https://codesandbox.io/s/boring-perlman-qwqsl


    Link to demo site rendered by CodeSandbox demo code:
    https://qwqsl.sse.codesandbox.io/

     

    Ad.vue

     

    AdInsideComponent.vue

     

    Nuxt.config.js