Overlay Ads Setup - Overlayed

The last step of setting up ads is to add the ad unit containers to your overlay. You’ll work closely with the Overlayed team to determine which ad units are available to you and where they’ll be positioned.

Adding an Ad Unit

Each ad unit is a <div> with two things:

an id that uniquely identifies the slot on the page
a class that matches the ad unit’s base selector (for example, htlad-medrec)

<div id="right-rail-2" class="htlad-medrec"></div>

Once the container exists in the DOM, call refreshAdsViaDivMappings to request a fill for it:

import overlayedAds from "@overlayed/ads";

overlayedAds.refreshAdsViaDivMappings([{ divId: "right-rail-2", baseDivId: ".htlad-medrec" }]);

Per-Slot Targeting

You can pass targeting key-values per slot when refreshing. These are merged with page-level targeting:

overlayedAds.refreshAdsViaDivMappings([
	{
		divId: "right-rail-2",
		baseDivId: ".htlad-medrec",
		targeting: { page_id: "HomePage" },
	},
]);

You may not pass any user-identifiable data in targeting.