Do you support infinite scroll?

Infinite scroll is a setup that is usually handled by the publisher. The standard use case is to have a new article load as a user scrolls to the end of the previous article. We have made a method available for our publishers to call ads on-the-fly; in the case of an infinite scroll setup, you can use this method to call and insert ads into their respective slots. This is controlled entirely by the publisher, we are just making ads available to be called later in the page.

Any site that is loading content dynamically (such as infinite scroll) will need to use a different method to render all subsequent ad calls. This can be applied for any single page application or other dynamic ad generation. Below you will find code samples and descriptions on how to use these methods.

freestar.newAdSlots(args)

The example below outlines everything needed to render an ad on the page. Let’s walk through this line-by-line.

  1. We wrap the entire newAdSlots method inside of a callback to ensure that the Freestar scripts have loaded and are available to call the method. This is a standard JavaScript callback, so it can be used in a number of ways.
    1. We suggest using it in order to ensure Freestar scripts are ready to fire.
  2. Declare the newAdSlots method. This function allows you to pass through an array of objects. You should pass the ads through that you plan on calling on the page.
  3. The placementName is the Tag ID provided by Freestar. In the ad tags file that is provided to you by your TAM, see the “freestar.config.enabled_slots” in the header section as those are the Tag ID’s you should use for the placementName.
  4. The slotId is the ID of the div you plan on rendering the ads in.
    1. This must be unique for each ad on the page.
  5. The remaining lines are just the closing brackets for the code.
function callAds() {
freestar.newAdSlots([{
placementName: 'Freestar Ad Tag ID',
slotId: 'Div ID of existing div you want to inject ad into'
}]);
}
freestar.initCallback = function () { callAds() }

Since the method allows you to pass an array of objects, you can call as many ads as you need on the page. It’s better to package them all up, for each page, to keep the number of requests lower (this will help with latency). Below is an example of the described method rendering three (3) ads on the page.

function callAds() {
freestar.newAdSlots([{
placementName: 'sitename_300x250_1',
slotId: 'ad_300x250_1'
},
{
placementName: 'sitename_728x90_1',
slotId: 'ad_728x90_1'
},
{
placementName: 'sitename_300x250_2',
slotId: 'ad_300x250_2'
}]);
}
freestar.initCallback = function () { callAds() }

The above method should only be used when you want to call ads on-the-fly as the page is loading or an event triggers it. If you are loading ads on the pages initially, then you should declare those in the header configuration. This will help keep the initial page load quick.

If an event occurs – infinite scroll, or a click event to go to a new page – then the newAdSlots method should be used. If no ads are going to be configured on the first page load, then you will need to declare an empty array inside of the enabled_slots declaration like the below.

freestar.config.enabled_slots = [ ],

freestar.deleteAdSlots(list)

If you are using a single page application, then you will likely need to use this method to remove an old ad slot and render a new one. If you are navigating from one layout to a different layout, and your ad sizes or placements change, then you should call this method first and then build a new set of ads using the newAdSlot method. This method accepts an array of strings to delete specific ad slots based on the slotId you set above. If you don’t pass anything through, then it will simply delete all of the ad slots on the page. Let’s walk through an example below.

// Delete all ad slots on a page
freestar.deleteAdSlots();

// From the newAdSlots example above, delete one of the ad slots on the page based on the slotId defined above
freestar.deleteAdSlots('ad_300x250_1');

// From the newAdSlots example above, delete two of the slots. Note to pass the strings in an Array
freestar.deleteAdSlots(['ad_728x90_1', 'ad_300x250_2']);