Required Steps
Step 1: Implement ADL's On-Page Script (either directly on page or via GTM).
Step 2: Create a div adjacent or sibling to the ad div. This div needs to have a unique ID which will be pass to the "selector" parameter.
Step 3: Create div that will house the ADL "report ad" button. This will need to be set to class='adl-report-ad-container' and be a child to the div created in Step 2.
Step 4: Add/update the "slotRenderEnded" event listener for GPT (or similar if you're not using GPT) to include the ADL selector and create an event for ADL to listen for in order to enable the report ad button. If this is not done, no "Report Ad" button will be displayedStep 5: Reach out to your account manager to have this feature enabled. If possible, please also provide a test page/QA environment for our team to validate.
Example code:
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.pubads().addEventListener('slotRenderEnded', function (event) {
var adId = event.slot.getSlotElementId();
var adReportDialogSelector = 'reportDialog' + '-' + adId;
var addParentReporterDiv = document.createElement('div');
addParentReporterDiv.id = adReportDialogSelector; //this will be sibling to the ad div
var buttonDiv = document.createElement('div');
buttonDiv.className = 'adl-report-ad-container'; //child div to the above
var createReportBtnEvent = {
"adlAction": 'createUserReportButton',
"selector": '#' + adReportDialogSelector,
"uniqueId": event.creativeId || event.sourceAgnosticCreativeId,
"targetAd": adId
};
addParentReporterDiv.appendChild(buttonDiv);
var adContainer = document.getElementById(adId);
if (adContainer) {
adContainer.insertAdjacentElement("afterend", addParentReporterDiv);
window.postMessage(createReportBtnEvent, '*');
//ensures button only injected and rendered if ad is on the page
}
});
});
Note: If implementing code similar to above, please ensure that the sibling div (created by "addParentReporterDiv" variable) is destroyed when ads are refreshed.