AMP integration

General information

AMP (Accelerated Mobile Pages) is an open-source technology for improved performance of web content and ads, mainly for mobile devices.

vi stories support running in AMP through the  <amp-video-iframe> component (https://amp.dev/documentation/components/amp-video-iframe/). Running vi stories in the <amp-video-iframe> will render our contextual video unit with the accompanying video ads.

To integrate vi stories you first need to load the <amp-video-iframe> library in the <head> section of the page:

<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>

Then add the <amp-video-iframe> to the page in the position where you want it to render. Preferably use the responsive layout, and then just set the height and width according to the aspect ratio of the unit. See example below.

You will need to set parameter values and ids in the tag, specific to your publisher account with vi. For those values and ids, please contact your vi account manager or reach out to support@vi.ai

Example

<amp-video-iframedata-param-publisher-id="test_amp_vi_player"
    data-param-channel-id="test_channel"
    layout="responsive"
    width="320"
    height="180"
    poster="https://s.vi-serve.com/ampLoading.png"
    src="https://s.vi-serve.com/tagLoaderAmp.html">
</amp-video-iframe>

Configuration

Required parameters

  • data-param-publisher-id – vi publisher ID. This will be given to you by your vi account manager
  • data-param-channel-id – vi demand channel id. This will be given to you by your vi account manager

Optional parameters