Using FreeWheel Ads with AMP

This tutorial shows how to integrate FreeWheel ads with AMP.

This page covers:

  • Providing AMP with a configuration object for FreeWheel.
  • Providing AMP with the FreeWheel SDK and FreeWheel AMP plugin resource objects.
  • Providing AMP with your FreeWheel Ads configuration.

1. Providing AMP with a configuration object for FreeWheel

As a first step to include any of AMP plugins, it is needed to include a akamai.amp.PluginConfig for the desired plugin. In the case of FreeWheel is needed to include the freewheel object (see akamai.amp.freewheel.FreewheelConfig) as part of the plugin configurations.

var config = {
  plugins: {
    freewheel: {
      // Your freewheel configuration goes here
    }
  }
};
akamai.amp.AMP.create("amp", config);

2. Providing AMP with the FreeWheel SDK and FreeWheel AMP plugin resource objects

A akamai.amp.Resource must be included inside the FreeWheel configuration for both the FreeWheel SDK and the FreeWheel Plugin. If you have a custom version of the FreeWheel SDK you can use its url instead of the standard version by replacing the src.

var config = {
  plugins: {
    freewheel: {
      resources: [
        {src: "http://adm.fwmrm.net/libs/adm/6.28.0/AdManager.js", type: "text/javascript", async: true},
        {src: "${paths.plugins}freewheel/Freewheel.min.js", debug: "${paths.plugins}freewheel/Freewheel.js", type: "text/javascript", async: true}
      ]
    }
  }
};
akamai.amp.AMP.create("amp", config);

3. Providing AMP with your FreeWheel Ads configuration

As a final step it is needed to provide any required FreeWheel configuration as part of the freewheel configuration object.

var config = {
  freewheel: {
    resources: [
      {src: "http://adm.fwmrm.net/libs/adm/6.28.0/AdManager.js", type: "text/javascript", async: true},
      {src: "${paths.plugins}freewheel/Freewheel.min.js", debug: "${paths.plugins}freewheel/Freewheel.js", type: "text/javascript", async: true}
    ],
    networkId: 96749,
    serverUrl: "//demo.v.fwmrm.net/ad/g/1",
    profileId: "global-js",
    siteSectionId: "DemoSiteGroup.01",
    videoAssetId: "DemoVideoGroup.01",
    prerollSlotId: "Preroll_1",
    midrollSlotId: "Midroll_1",
    postrollSlotId: "Postroll_1",
    creativeParameters: [
      "type",
      "param2",
      "param3"
    ],
    parameters: [
      {
        key: "translator.vast.loadWithCookie",
        value: true
      }
    ]
  }
};
akamai.amp.AMP.create("amp", config);