Custom click tracking element unexpected/incorrect behavior

526 views
Skip to first unread message

Randall Nickerson

unread,
Dec 13, 2018, 8:38:33 PM12/13/18
to Interactive Media Ads SDK
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 id="contentElement" playsinline="" src="https://cdn.appnext.com/banner/video/video-586262-30.mp4?rnd=1542667567" style="font-size: 0em; position: fixed; top: 200px; left: 0px; width: 100%; height: 100%;">
      <source src="//d2pxzap5tc42m2.cloudfront.net/videos/blank.mp4" type="video/mp4">
   </video>
   <div id="adContainer" style="font-size: 0em; position: fixed; top: 200px; left: 0px; width: 100%; height: 100%;">
      <div style="position: absolute; width: 375px; height: 812px;"><iframe src="http://imasdk.googleapis.com/js/core/bridge3.265.1_debug_en.html#goog_1484275716" allowfullscreen="" allow="autoplay" width="375" height="812" style="border: 0px; opacity: 1; margin: 0px; padding: 0px; position: relative;"></iframe></div>
   </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.813s] [ima.vast.VastAdServerReporter] Pinging reporting URL: https://global.appnext.com/pView.aspx?b=592064&z=986974&c=463761&tid=vast&g=1&fi=nd&ecpm=0
[  0.815s] [ima.vast.VideoAdEventTracker] dispatching event creativeview
[  0.817s] [ima.vast.VastAdServerReporter] Reporting urls for event : creativeview
[  0.822s] [ima.vast.VastAdServerReporter] Pinging reporting URL: https://admin.appnext.com/appLink.aspx?b=592064&e=986974&tid=vast&q=&fi=nd&ox=0
[  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)

Deepika Uragayala (IMA SDK Team)

unread,
Jan 4, 2019, 9:21:16 AM1/4/19
to Interactive Media Ads SDK
Hi Randall,

Thank you for reaching out to us. For custom click tracking to work properly, you must provide an optional click tracking element to the AdDisplayContainer, custom playback must be used and the current ad is not an AdSense/AdX ad. What ad system are you using? Are you using custom ad playback? In your implementation, you're displaying your ads in fullscreen mode and appending a "Learn More" text over the video content while it is not recommended to render the custom click tracking element over the video player because it can intercept clicks to UI elements that the SDK renders. Can you share the ad tag you were using when you encountered this issue? You can use "Reply Privately to Author" option to share the details privately.

Regards,
Deepika Uragayala
IMA SDK Team
Reply all
Reply to author
Forward
0 new messages