Set Up FAQs
      Back to home
      1. Knowledge Base
      2. Set Up FAQs

      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.  However, for Rich Media placements(‘1x1 tags’) should be destroyed by calling to the  __vm_remove_category = ["richmedia_all"] method, instead of the __vm_remove queue, which should only be used for display/banner ad placements.

      Use case example:  User is navigating to another section/article of the site, and would like new ad slots to recreate a normal website scenario

      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