ClickTag implementation for Adform

Adform uses the DHTML (Dynamic HTML) API to provide clickTag functionality in HTML5 creatives. This guide covers the two methods supported by Adform, the required script tags, common errors, and how Adloom validates and fixes Adform clickTag implementations.

How Adform clickTag works

Adform provides the dhtml object, a global JavaScript API that allows your creative to interact with the Adform platform. To access the click-through URL, you call one of two methods on the dhtml object.

Adform requires that your HTML includes a script tag that loads the DHTML.js library from Adform's CDN. This script must be loaded before you attempt to use the dhtml API.

The key difference between the two methods is API version: dhtml.getVar() is the modern approach, while dhtml.external.getHTML() is legacy but still supported.

Modern method: dhtml.getVar()

This is the recommended approach for new Adform creatives. Use dhtml.getVar('clickTAG') to retrieve the click-through URL.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ad Creative</title>
  <script src="https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    .ad-container { width: 300px; height: 250px; background: #000; cursor: pointer; }
  </style>
</head>
<body>
  <div class="ad-container" id="adElement"></div>

  <script>
    // Get the clickTAG from Adform
    var clickTag = dhtml.getVar('clickTAG');

    // Handle click
    document.getElementById("adElement").addEventListener("click", function() {
      dhtml.clickthrough(clickTag);
    });
  </script>
</body>
</html>

Key points: The DHTML.js script is loaded from the Adform CDN; the clickTAG is retrieved using dhtml.getVar() (note the capital TAG); the click is handled using dhtml.clickthrough().

Legacy method: dhtml.external.getHTML()

Some older Adform creatives use the legacy API. This method still works but is not recommended for new creatives.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ad Creative</title>
  <script src="https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    .ad-container { width: 300px; height: 250px; background: #000; cursor: pointer; }
  </style>
</head>
<body>
  <div class="ad-container" id="adElement"></div>

  <script>
    // Get the clickTAG from Adform (legacy method)
    var clickTag = dhtml.external.getHTML('clickTAG');

    // Handle click
    document.getElementById("adElement").addEventListener("click", function() {
      dhtml.clickthrough(clickTag);
    });
  </script>
</body>
</html>

The legacy method uses dhtml.external.getHTML() instead of dhtml.getVar(). Both are valid; use the modern method for new work.

Common errors to avoid

Missing DHTML.js script

Without loading the DHTML.js library from the Adform CDN, the dhtml object will not exist, and your creative will throw JavaScript errors.

<!-- WRONG: Missing script -->
<body>
  <script>
    var clickTag = dhtml.getVar('clickTAG'); // ERROR: dhtml is undefined
  </script>
</body>

<!-- CORRECT: Script loaded first -->
<head>
  <script src="https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>
</head>

Wrong variable name case

The Adform API is case sensitive. The parameter must be exactly clickTAG (lowercase "click", capital "TAG"), not clickTag, clicktag, or ClickTAG.

// WRONG
var clickTag = dhtml.getVar('clickTag');
var clickTag = dhtml.getVar('clicktag');
var clickTag = dhtml.getVar('ClickTAG');

// CORRECT
var clickTag = dhtml.getVar('clickTAG');

Using window.open() instead of dhtml.clickthrough()

Adform tracks click events through the dhtml.clickthrough() method. Using window.open() directly bypasses Adform's click tracking and reporting.

// WRONG: Bypasses Adform tracking
window.open(clickTag, "_blank");

// CORRECT: Uses Adform tracking
dhtml.clickthrough(clickTag);

Mixing modern and legacy methods

Choose either dhtml.getVar() or dhtml.external.getHTML(), not both. Mixing them can lead to unpredictable behaviour and is unnecessary.

Incorrect CDN URL for DHTML.js

Adform's CDN URL is specific. Using an outdated or incorrect URL will result in the script failing to load.

<!-- CORRECT CDN URL -->
<script src="https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>

How Adloom detects Adform clickTag

Adloom scans your creative for Adform DHTML patterns. It looks for:

Modern method:

/dhtml\.getVar\s*\(\s*['"]clickTAG['"]\s*\)/

Legacy method:

/dhtml\.external\.getHTML\s*\(\s*['"]clickTAG['"]\s*\)/

DHTML script tag:

/<script[^>]*src="[^"]*Adform\.DHTML\.js[^"]*"[^>]*>/

Adloom validates that the DHTML.js script is loaded, that the dhtml API calls use the correct case (clickTAG), and that your click handler uses dhtml.clickthrough().

How Adloom auto-fixes Adform issues

If Adloom detects missing or incorrect Adform clickTag implementation, it can automatically fix it. Here's what happens:

1.
Adloom checks whether the DHTML.js script is present. If missing, it injects <script src="https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script> in the <head> section.
2.
It injects the modern clickTag retrieval pattern: var clickTag = dhtml.getVar('clickTAG'); with correct case.
3.
If click handlers are present, Adloom ensures they use dhtml.clickthrough(clickTag) instead of window.open().
4.
The fixed creative is saved as a new ZIP file ready for upload.

How Adloom helps

Validates DHTML API usage

Adloom checks that you are using the correct Adform API calls with proper case sensitivity. It detects both the modern dhtml.getVar() and legacy dhtml.external.getHTML() patterns.

Ensures DHTML.js is loaded

Adloom confirms that your creative includes the required DHTML.js script from Adform's CDN. If missing, it injects the correct script tag automatically.

Verifies click tracking

Adloom checks that your creative uses dhtml.clickthrough() for click handling, ensuring Adform's tracking and reporting work correctly.

One-click auto-fix

Use Adloom's "Fix all" button to inject correct Adform clickTag implementation, load the DHTML.js script, and fix click tracking in one click.

Convert between platforms

Have a creative built for CM360 or another platform? Adloom can auto-convert it to Adform format, injecting the DHTML API calls and removing incompatible code.

Next steps

"},{"@type":"HowToStep","position":2,"name":"Retrieve the clickTAG","text":"Use var clickTag = dhtml.getVar(\"clickTAG\"); to get the click-through URL from Adform. Use lowercase \"click\" and capital \"TAG\"."},{"@type":"HowToStep","position":3,"name":"Handle click events with dhtml.clickthrough()","text":"In your click handler, call dhtml.clickthrough(clickTag); instead of window.open(). This ensures Adform tracks the click."},{"@type":"HowToStep","position":4,"name":"Test and validate","text":"Upload your creative to Adloom to validate the DHTML API implementation and ensure compatibility."}]}