Ways to integrate

TABLE OF CONTENTS


Javascript

See Javascript SDK implementation.


ReactJS

ReactJS player implementation based on Javascript SDK implementation, with additional changes.

  • Step 1: Include the JavaScript SDK on your page as described Javascript SDK step 1.
  • Step 2: Create a basic React component.
import React from 'react';

export default class VideoChannels extends React.Component {

  render() {
    return (
      <div>    
        <div id="PLAYER_ID"></div>
      </div>
    )
  }
}


  • Step 3: Import Video Channels component.
import React from 'react';
import VideoChannels from './video-channels';

export default class SomeComponent extends React.Component {

  render() {
     return <VideoChannels />
  }
}

Google AMP

  • Step 1: Add amp-iframe components in your amp page head tag. See an Example.
  • Step 2: Place the following HTML snippet wherever you want the player to appear on your page (replace the id with your real player id).


    <amp-iframe width="600" height="336"
      layout="responsive"
      sandbox="allow-scripts allow-same-origin"
      src="https://player.ex.co/amp/PLAYER_ID">
      <amp-img layout="fill" src="https://cdn.playbuzz.com/amp/mcd/logo_600x336.png" placeholder></amp-img>
    </amp-iframe>
    NOTE: Some of Video Channels features are disabled due to AMP page limitation. Please Contact us to get more information.
    


GAM

  • Step 1: From GAM homepage, Go on the left menu “Delivery -> Orders” and create a new Order.

GAM Orders

  • Step 2: Set general settings (Name and Advertiser) and Click “Add Line Item”.
  • Step 3: Select Ad type: Display

GAM New Line Item

  • Step 4:Line item creation:
    • Select Line Item type: Sponsorship.
    • Expected creatives: Chose 1x1
    • Start Date: Immediately
    • End date: Unlimited
    • Inventory: Select the wanted ad unit slot where the player will be running
    • Save the Line Item

Line Item Description

  • Step 5:In the creative tab of the line item click add creative and set the Expected creatives field to be 1x1:
    • Type: Third-party
    • Target ad unit size: 1x1
    • Code snippet: Copy paste the the GAM embed Tag
    • Serve into a SaveFrame: Unchecked

Creative



AJAX

The JavaScript SDK scans the page on load, loading into each <div id="PLAYER_ID"></div> a player instance based on element id attribute. As AJAX can be used to update parts of a web page dynamically, it is recommended to implement the SDK outside the dynamic content scope, where the <div id="PLAYER_ID"></div> element can be constantly present.


See Javascript SDK implementation.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us how can we improve this article!

Select atleast one of the reasons

Feedback sent

We apprciate your effort and will try to fix the article