We are rendering ads using the IMA HTML5 SDK (im3/ima3_debug) with a full screen video element in a mobile environment. On our first pass the ads show and behave as expected - they autoplay muted, pause/resume on tap, and pause/open click through url when the "Learn More" text is clicked.
We then tried to use a custom click tracking element according to the information in the IMA HTML5 SDK documentation. Whether rendered over the video play or not the custom click tracking element does not behave as expected. If the video is playing then clicking the custom target element just pauses the video. If the video is paused, then clicking the custom target element resumes the video AND opens the click through url in a new window. Additionally the "Learn More" text still shows and (as seen using the debug output) still dispatches the "videoLearnMoreClicked" event even though it seems to do nothing else. We've checked the value of adsManager.isCustomClickTrackingUsed and it reports TRUE.
Looking at the verbose debug output (see below) we see that every time we click either the ad or the click tracking element the SDK reports dispatching a click event and a pause/resume event, but only the pause/resume events are emitted and caught in our listeners. The ONLY time we see a click event emitted is when we click the "Learn More" text and that is incorrect as it doesn't open the click through url (is just pauses the video).
Again, we initially had the click tracking element covering part of the video player, but rearranged the elements to separate them and we see exactly the same behavior in either scenario.
Questions:
1. Should the custom tracking element work essentially just like the "Learn More" text when it is a valid and in the right environment (i.e., isCustomClickTrackingUsed === TRUE)? Meaning that clicking the element should pause the ad and open the click through url in a new window.
2. The "Learn More" text should not be showing when the isCustomClickTrackingUsed reports TRUE, right?
3. Can you see anything we are doing wrong trying to get the custom click tracking working?
Thanks in advance for any help and please let us know if there is any more we can clarify!
HTML elements as rendered by the browser (to show styles and that the element positions do not overlap):
<div style="font-size: 0em; position: fixed; top: 200px; left: 0px; width: 100%; height: 100%; background-color: rgb(0, 0, 0);">
<button id="clickTracking" style="position: fixed; top: 60px; left: 0px; width: 200px; height: 60px; background-color: rgb(255, 153, 0);"></button>
</video>
<div id="adContainer" style="font-size: 0em; position: fixed; top: 200px; left: 0px; width: 100%; height: 100%;">
</div>
</div>
Relevant portions of JS:
...
const videoContent = document.getElementById("contentElement");
const adContainer = document.getElementById("adContainer");
const clickTracking = document.getElementById("clickTracking");
const adDisplayContainer = new window.google.ima.AdDisplayContainer(
adContainer,
videoContent,
clickTracking,
);
adDisplayContainer.initialize();
adsLoader.addEventListener(
window.google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
adsManagerLoadedCallback,
false,
);
const adsLoader = new window.google.ima.AdsLoader(adDisplayContainer);
...
...
let adsManager;
function adsManagerLoadedCallback(adsManagerLoadedEvent) {
const adsManager = adsManagerLoadedEvent.getAdsManager(videoContent);
try {
adsManager.init(width, height, window.google.ima.ViewMode.FULLSCREEN);
adsManager.start();
} catch (adError) {
adsManager.destroy();
}
}
...
console.log("adsManager.isCustomClickTrackingUsed:", adsManager.isCustomClickTrackingUsed()); // reports TRUE in logs (see below)
Console logs (using the ima3_debug for verbosity):
(the player.adEvent lines are reporting from our listeners attached to each event type, the NOTE lines show user interaction at that point)
[ 0.029s] [ima.loader.AdsLoaderWrapper] Requesting ads using new ads loader.
[ 0.038s] [ima.loader.AdsLoaderWrapper] requestAds, processing external request.
[ 0.039s] [ima.loader.SequentialAdsLoader] Enqueued new request.
[ 0.039s] [ima.loader.SequentialAdsLoader] Starting request from queue.
[ 0.041s] [ima.loader.AdXmlFetcher] Using adsRequest.adsResponse for ad load.
[ 0.058s] [ima.loader.AdSourceFactory] Creating VastAdSource.
[ 0.064s] [VastAdSource] processInlineAd, successCallback with 1 ads
[ 0.067s] [ima.managers.AdsManagerFactory] createAdsManagerFromAds_, adType: video
[ 0.071s] [ima.loader.SequentialAdsLoader] Starting request from queue.
[ 0.073s] [ima.common.GptCompanionAdService] GPT companion ads service not available.
---> player.adEvent.loaded (1ba1ef72c3b74879b26656a78d909118)
[ 0.330s] [ima.managers.BaseAdsManager] Could not display companion ads.
---> player.adEvent.contentPauseRequested (1ba1ef72c3b74879b26656a78d909118)
[150.407s] [Html5VideoDisplay] No demuxed parameter found, setting url directly.
---> player.adEvent.adBuffering (1ba1ef72c3b74879b26656a78d909118)
[ 0.805s] [ima.vast.VideoAdEventTracker] dispatching event impression
[ 0.810s] [ima.vast.VastAdServerReporter] Reporting urls for impression
[ 0.815s] [ima.vast.VideoAdEventTracker] dispatching event creativeview
[ 0.817s] [ima.vast.VastAdServerReporter] Reporting urls for event : creativeview
[ 0.823s] [ima.vast.VideoAdEventTracker] dispatching event start
[ 0.825s] [ima.vast.VideoAdEventTracker] dispatching event measurable_impression
[ 0.832s] [ima.vast.VastAdServerReporter] Reporting urls for event : start
[ 0.840s] [ima.vast.VideoAdEventTracker] dispatching event mute
---> player.adEvent.impression (1ba1ef72c3b74879b26656a78d909118)
---> player.adEvent.start (1ba1ef72c3b74879b26656a78d909118)
adsManager.isCustomClickTrackingUsed: true
[ 2.621s] [ima.vast.VideoAdEventTracker] dispatching event viewable_impression
[ 8.304s] [ima.vast.VideoAdEventTracker] dispatching event firstquartile
---> player.adEvent.firstquartile (1ba1ef72c3b74879b26656a78d909118)
(/* NOTE 1: clicked custom tracking element */)
[ 11.403s] [ima.vast.VideoAdEventTracker] dispatching event click
[ 11.410s] [ima.vast.VideoAdEventTracker] dispatching event pause
---> player.adEvent.pause (1ba1ef72c3b74879b26656a78d909118)
(/* NOTE 2: clicked ad outside of custom tracking element */)
[ 15.550s] [ima.vast.VideoAdEventTracker] dispatching event click
[ 15.579s] [ima.vast.VideoAdEventTracker] dispatching event resume
---> player.adEvent.resume (1ba1ef72c3b74879b26656a78d909118)
(/* NOTE 3: clicked custom tracking element */)
[ 18.491s] [ima.vast.VideoAdEventTracker] dispatching event click
[ 18.498s] [ima.vast.VideoAdEventTracker] dispatching event pause
---> player.adEvent.pause (1ba1ef72c3b74879b26656a78d909118)
(/* NOTE 4: clicked ad outside of custom tracking element */)
[ 21.430s] [ima.vast.VideoAdEventTracker] dispatching event click
[ 21.442s] [ima.vast.VideoAdEventTracker] dispatching event resume
---> player.adEvent.resume (1ba1ef72c3b74879b26656a78d909118)
[ 22.939s] [ima.vast.VideoAdEventTracker] dispatching event midpoint
---> player.adEvent.midpoint (1ba1ef72c3b74879b26656a78d909118)
(/* NOTE 5: clicked "Learn More" */)
[ 24.519s] [ima.vast.VideoAdEventTracker] dispatching event videoLearnMoreClicked
---> player.adEvent.click (1ba1ef72c3b74879b26656a78d909118)
(/* NOTE 6: clicked custom tracking element */)
[ 25.598s] [ima.vast.VideoAdEventTracker] dispatching event click
[ 25.603s] [ima.vast.VideoAdEventTracker] dispatching event pause
---> player.adEvent.pause (1ba1ef72c3b74879b26656a78d909118)
(/* NOTE 7: clicked custom tracking element */)
[ 28.818s] [ima.vast.VideoAdEventTracker] dispatching event click
[ 28.861s] [ima.vast.VideoAdEventTracker] dispatching event resume
---> player.adEvent.resume (1ba1ef72c3b74879b26656a78d909118)
[ 33.617s] [ima.vast.VideoAdEventTracker] dispatching event thirdquartile
---> player.adEvent.thirdquartile (1ba1ef72c3b74879b26656a78d909118)
[ 40.972s] [ima.vast.VideoAdEventTracker] dispatching event complete
[ 40.976s] [ima.vast.VastAdServerReporter] Reporting urls for event : complete
---> player.adEvent.complete (1ba1ef72c3b74879b26656a78d909118)
---> player.adEvent.contentResumeRequested (1ba1ef72c3b74879b26656a78d909118)
---> player.adEvent.allAdsCompleted (1ba1ef72c3b74879b26656a78d909118)