Insert Clientside Ads

Client-side ads are important for delivering a seamless and engaging user experience. With client-side rendering, video ads are processed and rendered directly on the user's device, allowing for faster ad load times, smoother playback, and reduced buffering. Client-side ads also enable dynamic ad insertion, allowing for personalized and targeted ad content based on user behavior and preferences. Additionally, client-side ads provide more flexibility in ad formats, such as interactive video ads and rich media ads, which can captivate users and boost ad engagement.

Generic Clientside Ad Configuration

LuraPlayer, comes equipped with its own fully VAST-compliant ad manager, making it easy for you to monetize your content by including multimedia ads within your websites and apps. With LuraPlayer's ad manager, you can seamlessly integrate ads and serve them to your audience while maintaining full control over your content video playback. You can also customize the ad experience to suit your needs and preferences, including ad format, placement, and frequency. By leveraging LuraPlayer's ad manager, you can optimize your ad revenue and enhance your user engagement.

To configure the LuraPlayer Ad Manager, you need to go through the following steps:

Create an ads attribute inside your config object.
Create a clientSide object inside the ads object
Inside the clientSide object, set the provider key to generic.
Create a generic object inside the clientSide object.
Create a breaks array inside the generic object.
Inside the breaks array, insert the VAST or VMAP configurations based on the configuration below

Attribute	Type	Required	Description
url	string	yes	URL of the VAST or VMAP Ad Tag
offset	string \| number	only if vast url is provided	Offset of the VAST Ad Tag. The offset value can be provided in "preroll", "postroll", "NN%", "HH:MM:SS.mmm" and seconds as number format.

info

LuraPlayer Ad Manager will assume that the entered URL is a VMAP URL if no offset is provided and will try to fetch the data from the provided URL. However, if the response is not a VMAP, LuraPlayer Ad Manager will ignore it.

Here is a configuration example that uses LuraPlayer Ad Manager:

const config = {
    ...
    ads: {
      clientSide: {
        provider: "generic",
        generic: {
          breaks: [
            {
              // Ad will play before the content.
              offset: "preroll",
              url: "https://example.com/your_vast_url"
            },
            {
              // Ad will play in the middle of the content.
              offset: "50%",
              url: "https://example.com/your_vast_url"
            },
            {
              // Ad will play 1 minute 10 seconds from the beginning of the video.
              offset: "00:01:10.000",
              url: "https://example.com/your_vast_url"
            },
            {
              // Ad will play 125 seconds from the beginning of the video.
              offset: 125,
              url: "https://example.com/your_vast_url"
            },
            {
              // Ads will be aligned based on the time of the ads in the VMAP
              url: "https://example.com/your_vmap_url"
            },
            {
              // This will be ignored, since it is a VAST Url without an offset.
              url: "https://example.com/your_vast_url"
            }
          ],
        }
      }
    },
    ...
};
const player = new lura.Player(document.getElementById("player"));
player.setConfig(config);

You can also provide macros in your configuration and URL. The macros provided in the macro attribute will replace the macros in the URL.

Attribute	Type	Required	Description
macros	[key: string]: string	no	Values that you want to be replaced in the URL

caution

LuraPlayer also includes reserved macros that are all prefixed with LURA_. If you include a macro key that is prefixed with LURA_, LuraPlayer will ignore it and use its own logic. Please see macros for more detail.

const config = {
    ...
    ads: {
      macros: {
        CUSTOM_MACRO: "my-url-safe-macro"
      },
      clientSide: {
        provider: "generic",
        generic: {
          breaks: [
            {
              offset: "preroll",
              url: "https://example.com/your_vast_url?custom=[CUSTOM_MACRO]&pal_nonce=[LURA_PAL_NONCE]&correlator=[LURA_CORRELATOR]"
            },
            {
              offset: "postroll",
              url: "https://example.com/your_vast_url?custom=[CUSTOM_MACRO]&pal_nonce=[LURA_PAL_NONCE]&correlator=[LURA_CORRELATOR]"
            }
          ]
        }
      }
    },
    ...
};
const player = new lura.Player(document.getElementById("player"));
player.setConfig(config);

Non-Generic Clientside Ad Configuration

LuraPlayer's ad manager is a powerful tool that allows you to monetize your content by serving multimedia ads within your apps and websites. It offers a wide range of customizable options, including ad format, placement, and frequency, allowing you to optimize your ad revenue while providing a seamless user experience. However, if you prefer to use a different ad management solution, LuraPlayer also offers integrated plugins that allow you to easily integrate ads using the FreeWheel SDK and IMA SDK. These plugins work seamlessly with LuraPlayer, ensuring a dynamic, engaging experience for your users. Whether you choose to use LuraPlayer's ad manager or integrated plugins, you can be confident that you're using a powerful, versatile multimedia player that will help you maximize your ad revenue and enhance your user engagement.

To learn more about how to implement clientside ads with IMA SDK or Freewheel Ad Manager SDK in Lura Player, check out IMA Plugin or Freewheel Plugin

GAM Configuration
const config = {
    ...
    ads: {
      clientSide:{
        provider: "gam",
        gam: {
          enabled: true,
          adTagUrl:
            "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator=[LURA_CORRELATOR]",
        },
      },
    },
    ...
};
const player = new lura.Player(document.getElementById("player"));
player.setConfig(config);

FreeWheel Configuration
const config = {
    ...
    ads: {
      clientSide:{
        provider: "freewheel",
        freewheel: {
          enabled: true;
          networkId?: "YOUR_NETWORK_ID";
          serverUrl?: "YOUR_SERVER_URL";
          profileId?: "YOUR_PROFILE_ID";
          siteSectionId?: "YOUR_SITE_SECTION_ID";
          videoAssetId?: "YOUR_VIDEO_ASSET_ID";
          adSlots?: {
              customId: string;
              adUnit: "preroll" | "midroll" | "postroll";
              timePosition: number;
              slotProfile?: string;
              cuepointSequence?: number;
              maxDuration?: number;
              minDuration?: number;
              acceptContentType?: string;
              signalId?: string;
              maxAds?: number;
          }[];
          keyValueMap?: {
              [key: string]: string;
          };
          parameters?: {
              name?: string;
              value?: any;
              level?: any;
          }[];
        },
      },
    },
    ...
};
const player = new lura.Player(document.getElementById("player"));
player.setConfig(config);

Generic Clientside Ad Configuration​

Non-Generic Clientside Ad Configuration​

Generic Clientside Ad Configuration

Non-Generic Clientside Ad Configuration