Skip to main content
Submit a request

API Methods

Updated

Overview

The Freestar React component includes various methods to customize your ad placements.

Page-Level Key-Value Targeting

Apply key-value targeting to your ad requests at the page or slot level.

Use the FreestarAdSlot.setPageTargeting method to target page-level key values.

JavaScript

// Example with a single value for a key.
FreestarAdSlot.setPageTargeting('pageId', '123456');

// Example with multiple values for a key.
FreestarAdSlot.setPageTargeting('categories', ['news', 'adtech']);

 

📘 Clear or update the page-level targeting when a user navigates to another section of your app but an ad slot is still visible.

Slot-level targeting information can be found in the Props document.

Tracking Page Views

pubfig.js collects page URLs to track page views, but in a Single-Page Application (SPA), the DOM and/or window lifecycle does not reload pubfig.js. Use the FreestarAdSlot.trackPageview() method to address this and ensure accurate data collection. See this document for more information.

JavaScript

// New view / URL state updated

// Upon completion of the view being mounted invocation of the trackPageview method within the queue method

freestar.queue.push(function(){
   FreestarAdSlot.trackPageview()
});

Queuing Freestar Placements

Use the Freestar React Component to queue ad slot auction and render; use it to preload the Freestar library but hold ad delivery until business logic is complete.

🚧

Please submit a request for a review here before implementing.

FreestarAdSlot.queueAdCalls

Pass a boolean that, if set to true, restricts the Freestar Library from auctioning or rendering ad units. Queued ad units will be flushed and auctioned/rendered together when false.

FreestarAdSlot.releaseQueuedAds

Any queued ad units will be flushed out and auctioned/rendered together when called.

import React, { Component } from 'react'

import FreestarAdSlot from '@freestar/pubfig-adslot-react-component'

class QueueFreestarExample extends Component {
  FreestarAdSlot.queueAdCalls(true)
  onHandleClick= () = {
    FreestarAdSlot.queueAdCalls(false)
  }

  render() {
    const publisher = 'yourdomain-com'
    const placementName = 'yourdomaincom-placementName'
    
    const { queue } = this.state
    
    return (
      <div>
        <FreestarAdSlot
          publisher={publisher}
          placementName={placementName}
        />
        <button onClick={this.onHandleClick()}Trigger Ad Calls</button>
      </div>
    )
  }
}

export default QueueFreestarExample

Bypassing Freestar

Our React component allows us to bypass relying on the Freestar wrapper to make ad requests.

🚧

Using this option will not allow Freestar to monetize the ad slot with header bidding demand nor allow Freestar to manage the ad slot. Please consult your Freestar customer success team before implementing.

Bypassing Freestar opens additional props.

Name Scope Description Example Type
adUnitPath Required Ad Unit Path - Full Google Ad Manager ad unit path '/123456/my_adunit' String
slotSize Required Slot Size - Initial size of ad slot. It can contain multiple sizes. '[300,250]'
or
[[300,250], [728,90]] 		Array
sizeMapping Optional Slot size mapping - Allows multiple sizes to serve based on the viewport width. [{ viewport: [0,0], slot[300,250] }, { viewport: [768, 0], slot[728,90] }] Array

JSX

import React, { Component } from 'react'

import FreestarAdSlot from '@freestar/pubfig-adslot-react-component'

class BypassingFreestarExample extends Component {

  render() {
    const adUnitPath = '/123456/my_adunit'
    const slotSize = [[300,250], [728,90]]
    const sizeMapping = [
        {viewport: [0,0], slot: [300,250]},
        {viewport: [768, 0], slot: [728,90]}
    ]
    
    return (
      <div>
        <FreestarAdSlot
          adUnitPath={adUnitPath}
          slotSize={slotSize}
          sizeMapping={sizeMapping}
        />
      </div>
    )
  }
}

export default BypassingFreestarExample

What's Next

Related articles