Single Page Applications (SPA) with Ad Management

The implementation below can be used for Single Page Application (SPA) based websites.

Initial Page Load

1. Insert the Sovrn header script

2. Insert the ad unit divs needed on the initial page load

New SPA Page Load

1. Update the page URL (if needed)

2. If there are slots from the previous page that will be on the next page, but the div will be removed and reinserted into the DOM, destroy slots using the following function: properDestroyDfpSlot('slot_name');

3. Insert any new ad slots, or slots that have been destroyed and are being reinserted

4. Call the function properSpaNewPageReset();

Detailed Function Descriptions 

properSpaNewPageReset(); Rebuilds the page object in the ad-project code and records a new page view. Refreshes ad slots that are persisting to the next page while also building new slots that have been added to the DOM. Deletes and restarts numbering of dynamic slots. This function should only be called when a new page is loaded on a SPA site, not on the initial page load.

properBuildSlots(); Allows the ad-project code to know that the layout of the page has changed. Runs a check to see if more slots have been added, or if they need to be dynamically added by the ad-project code. This function doesn't refresh the current slots on the page, but it will build and display new slots. This function won't record a new page view.

properDestroyDfpSlot('slot_name'); Destroys the GPT slot reference but keeps the slot object in our code. This should be used if a slot will be on the next page but the div will be removed and reinserted into the DOM. GPT slot will need to be re-defined and will be handled by our code.

See Ad Project Functions in Ad Management to see all available JS functions.

Need More Help?

If you still have questions, please reach out to admanagement@sovrn.com.