Implementation Instructions:

A.  Insert in the page <head>, above the proper.io <script>:

var special_ops = {
	spa_settings: {
		enabled: true,
		prefetch: true,
		prefetch_slots: ['slot_1','slot_2'],
		gallery_id: 'gallery_1',
		gallery_base_url: 'https://gallery.com/for/things/',
	}
 }
OR
var special_ops = special_ops || {};
special_ops['spa_settings'] = {
	enabled: true,
	prefetch: true,
	prefetch_slots: ['slot_1','slot_2'],
	gallery_id: 'gallery_1',
	gallery_base_url: 'https://gallery.com/for/things/',
}

 Note:

  • prefetch_slots should include all ad units that will be on the next page of the gallery
  • gallery_id should be a unique value for each gallery article
  • gallery_base_url should be the URL of the first page in the gallery.

B.  Insert ad units on page

Example:

<div class="proper-ad-unit"> 
            <div id="proper-ad-slot_1"> <script> propertag.cmd.push(function() { proper_display('slot_1'); }); </script> </div> 
      </div>

  C. Dynamically load next/previous page

  1. Update special_ops['spa_settings'] accordingly
    1. If a slot was defined in special_ops['spa_settings']['prefetch_slots] on the previous page we will assume that it will be on this page
    2. If the user navigates to a new page with Proper code outside of the gallery, the gallery_id and gallery_base_url need to be updated accordingly
  2. Delete old ad slots
    1. If a slot existed on the previous page, but will not exist on the next page, it needs to be deleted with a function (replace slot_name with the name of the ad unit): properDeleteSlot(slot_name);
    2. If a slot on the previous page will be removed and re-inserted into the DOM on the next page, the GPT slot needs to be destroyed before removing it (replace slot_name with the name of the ad unit): properDestroyDfpSlot(slot_name);
  3. Call new SPA function properSpaNewPage();
  4. Load new ad slots
    1. Insert any new ad slots
    2. Existing ad slots carried over to next page
      1. If slot is staying in the DOM, will be on the next page, and was included in pre-fetch, no action is required

Glossary

special_ops Settings

var special_ops = {
	spa_settings: {
		enabled: true,
		prefetch: true,
		prefetch_slots: ['slot_1','slot_2'],
		gallery_id: 'gallery_1',
		gallery_base_url: 'https://gallery.com/for/things/',
	}
 }
OR
var special_ops = special_ops || {};
special_ops['spa_settings'] = {
	enabled: true,
	prefetch: true,
	prefetch_slots: ['slot_1','slot_2'],
	gallery_id: 'gallery_1',
	gallery_base_url: 'https://gallery.com/for/things/',
}
  • enabled (Boolean) - Enables SPA logic
  • prefetch (Boolean) - Prefetch ads for next page. Only use on gallery pages
  • prefetch_slots (Array Strings) - List of slots to prefetch ads for next page. Only use on gallery pages
  • gallery_id (String) - Unique id for gallery. Stays the same throughout gallery. We only show prefetched ads for pages in the same gallery
  • gallery_base_url (String) - Url to use when sending bid requests for prefetching. Should stay the same throughout gallery pages. Can help url request/display mismatch

Functions

  • properSpaNewPage() - Sets the page object and log a new pageview. Needs to be called whenever a new page is loaded. (if no page_number, defaults to page_number = 1 for SPA)
  • properDeleteSlot(slot_name, page_number) - Used to destroy slot object on the page. Should be used when a slot is being removed from the DOM and will not be on the next page. (if no page_number, defaults to page_number = 1 for SPA)
  • properDestroyDfpSlot(slot_name, page_number) - 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 re-inserted into the DOM. GPT slot will need to be re-defined and will be handled by our code.