Props

Overview

The Freestar React component accepts multiple props to configure the ad placement to your specifications.

slotId

Type string

The default element ID of an ad slot's parent container is placementName. Use the slotId prop to change it. This is useful when you reuse the placement on the same page.

<FreestarAdSlot
publisher={'yourdomain-com'}
placementName={'yourdomaincom-placementName'}
slotId={'custom-slot-id'}
/>

targeting

Type object

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

Slot level targeting will apply key-value pairs to every ad request for a particular slot.

Use the targeting prop to set slot-level key-value targeting of each ad request. The prop accepts an object of key-value pairs. The values of each item in the object must either be a string or an array of strings.

JSX

import React, { Component } from 'react'

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

const position = 'atf'
const interests = ['technology', 'ai'] 

class TargetingExample extends Component {	
  
  render() {
    const publisher = 'yourdomain-com'
    const placementName = 'yourdomaincom-placementName'
    const keyValueTargeting = {
      'position': position,
      'interests': interests
    }

    return (
      
    )
  }
}

export default TargetingExample

Information on page-level targeting can be found in the Methods document.

classes

Type array

To apply additional styles to the div containing an ad slot, use the classes prop.

JSX

import React, { Component } from 'react'

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

class CustomStylesExample extends Component {

  render() {
    const publisher = 'yourdomain-com'
    const placementName = 'yourdomaincom-placementName'
    const adSlotClasses = ['m-30', 'p-15', 'b-thin-red']

    return (
      
    )
  }
}

export default CustomStylesExample

adRefresh

Type number

By default, Freestar applies a refresh timer to each ad slot. Sometimes, it makes sense to control this programmatically instead. For example, forcing a slot to refresh when a user navigates completes an action, such as clicking a button or navigating to a different site section.

Increment the adRefresh prop value by 1 to force an ad slot to refresh. If you use Freestar's automatic refresh product, the adRefresh value will increment every time the slot refreshes.

🚧

Refreshing ad slots in quick succession is against Google Ad Manager terms & conditions; it can lead to policy violations and demonetisation of you site. Please speak with your Freestar Point of Contact before adjusting refresh times.

JSX

import React, { Component } from 'react'

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

class RefreshExample extends Component {
  state = {
    adRefresh: 0
  }

  onAdRefresh = () => {
    const { adRefresh } = this.state
    this.setState({
      adRefresh: adRefresh + 1
    })
  }

  render() {
    const placementName = 'PublisherName_970x250_728x90_320x50'
    const publisher = 'publisherName'
    
    const { adRefresh } = this.state
    
    return (
      <div>
        <FreestarAdSlot
          publisher={publisher}
          placementName={placementName}
          adRefresh={adRefresh}
        />
        <button onClick={this.onAdRefresh}>Trigger Refresh</button>
      </div>
    )
  }
}      

export default RefreshExample

channel

Type string

Publishers with complex site taxonomy can reuse placements using channel prop.

Publishers often use the channel prop when they have large websites with many categories and subcategories, such as news and sports. This feature allows publishers to increase the number of ad units on their sites without creating dozens of placements.

JSX

import React, { Component } from 'react'

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

class ChannelVariableExample extends Component {	
  
  render() {
    const publisher = 'yourdomain-com'
    const placementName = 'yourdomaincom-placementName'
    const channelVariable = 'news'

    return (
      
    )
  }
}

export default ChannelVariableExample

For more information on the use cases of the channel variable, please refer to the Channel Variable documentation.

What's Next

API Methods ->