How to configure Google video ads

This guide walks you through the steps for a basic video advert configuration. Further configuration options and use cases will be discussed in separate guides.

Setting up Google video adverts requires inserting external JavaScript in Arc XP code. To achieve this, Video Center recommends inserting these scripts in the output types. See How to Create and Use Output Types

By default, only one default output type exists, which is located in /components/output-types/default.jsx, the same folder you can store custom output types in. Apply the following steps in all the output type files that require Google video adverts.

For the initial setup we recommend using the following test ad tag: https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_s[…]ms=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=
Later on you will need to replace the test tag with your registered ad tag. To do this, contact Arc XP Customer Support to request Video Center to modify your org.js file with this data.
Check your browser extensions and de-activate ad blockers.

Insert custom code in the chosen output type file(s), the JavaScript code should be a string.

Here is a functional sample (adapt it to your output type file):

function generateAdTag() {
      console.log(fusionContext?.globalContent?.taxonomy);
      return "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator="
    }

    return (<html>
      <head>
        <title>Fusion Article</title>
        <MetaTags />
        <Libs />
        <CssLinks />
        <link rel='icon' type='image/x-icon' href={deployment(`${contextPath}/resources/favicon.ico`)} />
        <script dangerouslySetInnerHTML={{
          __html: `
            window.PoWaSettings = {
              advertising: {
                adTag: "${generateAdTag()}"
              }
            }
          `}} />
      </head>
      <body>
        <div id='fusion-app'>
          {children}
        </div>
        <Fusion />
      </body>
    </html>)

Create a page with at least one video in it, and choose an output type that contains the code above. Save it.

Try and play the video, you should see the sample advert at the beginning. This should work both in Composer and in preview mode.

For more than one video per page, extend adTag as a function:

<script dangerouslySetInnerHTML={{
        __html: `
          window.PoWaSettings = {
            advertising: {
              adTag: (powa, videoData) => {
                // Your code here to target videos
                return "${generateAdTag()}"
              }
            }
          }
       `}} />

Use video tags and any other data available in the videoData object to filter and target specific videos.

In React.js there are two ways of inserting external scripts:

The first way involves inserting the script within the <head> element, this is the output type method described above does.
The second method requires inserting the script within React,js hook useEffect, that is, during run-time.

Both approaches are valid and should work however, Video Center recommends the output type method because it ensures that by the time the video player loads, the ad-tag is already available, avoiding potential errors and glitches. The useEffect approach should work as long as this requirement is met.

In this section:

How to configure Google video ads

Search results