properSpecialOps settings

properSpecialOps['spa_settings'] = {
    enabled: true,
    prefetch: true,
    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
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

 

Exposed Functions

properSpaNewPage();

This function should be called when a new page is loaded in a Single Page App. This will rebuild the page object in the ad-project code and record a new page-view. This will handle refreshing slots that are persisting to the next page and also build new slots that have been added to the DOM. The page url needs to be updated in the address bar before calling this function so that the earnings are recorded correctly.

properBuildSlots();

Lets the ad-project code know that the layout of the page has changed and runs a check to see if more slots have been added or need to be dynamically added by the ad-project code. This function doesn't refresh the current slots on the page but will build and display new slots. This wont record a new page-view. A good use case for this is on an infinite scroll page where new content is appended to the page as the user scrolls. Once the new content is added to the page you need to call properBuildSlots() to let the ad-project code know we need to check for new slots and then display them.

properDeleteSlot(slot_name);

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.

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 re-inserted into the DOM. GPT slot will need to be re-defined and will be handled by our code.

 

Integration:

  1. Initial page load
    a. Set spa_settings through the properSpecialOps. Note, this should be placed before the Proper script in the <head> of the page. prefetch should be set to true for gallery style pages where ad layout will remain the same. Otherwise, set to false.
    properSpecialOps['spa_settings'] = {
    enabled: true,
    prefetch: true,
    gallery_id: 'gallery_1',
    gallery_base_url: 'https://gallery.com/for/things/',
    }​
    b. Insert ad slots on page
    <div class=“proper-ad-unit”>
    <div id=“proper-ad-slot_1”> <script> propertag.cmd.push(function() { proper_display('slot_1'); }); </script> </div>
    </div>​


  2. Dynamically load next/previous page
    1. Update page URL if needed
    2. Update properSpecialOps['spa_settings'] accordingly (if gallery_id or gallery_base_url are changing)
    3. Add new slots (there are 2 options)
      1. Option 1:
        1. Call properSpaNewPage();
        2. Then, insert new slot divs with proper_display included
        3. Example:
          <div class=“proper-ad-unit”> <div class=“proper-ad-slot_2”> <script> propertag.cmd.push(function() { proper_display('slot_2'); }); </script> </div> </div>
      2. Option 2:
        1. Insert new slot divs without proper_display included
        2. Example:
          <div class=“proper-ad-unit”> <div class=“proper-ad-slot_2”> </div> </div>
        3. After all new slots have been added to DOM, call: properSpaNewPage();