AnyClip Display Ad Manager: Implementation Guide

This guide outlines the steps to implement the AnyClip Display Ad Manager on your web pages. The setup requires a single JavaScript tag and standard HTML container elements.

Prerequisites

Before you begin, request your unique publisher name and widget name from the AnyClip AdOps team.

Step 1: Load the Display Ad Manager

To initialize the Display Ad Manager, add the AnyClip JavaScript tag within the <head> section of your HTML document.

Ensure you replace "your publisher name" and "your widget name" with the credentials provided by AdOps.
The async attribute ensures the script loads without blocking the rest of the page.

HTML

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a test ad." />
  <title>Display a test ad</title>
  
  <script 
    src="https://player.anyclip.com/acam/js/prod/v1/src/acam.js" 
    data-pubname="your publisher name" 
    data-widgetname="your widget name" 
    async>
  </script>
</head>

Step 2: Define Ad Slots

Specify where the ads will appear on the page by placing container elements (<div>) within the <body> of your HTML document.

Important rules for Ad Slots:

The id of the <div> must exactly match the ID specified when defining the ad slot(s) in your AnyClip configuration file.
Ad slot IDs must adhere to the following naming convention: slot-{number} (e.g., slot-1, slot-2).

HTML

<body>
  <div id="slot-1"></div>
</body>

Full Example

Here is how the complete implementation looks when combined into a single HTML document:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>AnyClip Display Ad Manager Example</title>
  
  <script 
    src="https://player.anyclip.com/acam/js/prod/v1/src/acam.js" 
    data-pubname="your publisher name" 
    data-widgetname="your widget name" 
    async>
  </script>
</head>
<body>

  <h1>Welcome to our site</h1>
  <p>Content goes here...</p>

  <div id="slot-1"></div>

  <p>More content goes here...</p>

</body>
</html>