issues lazy loading HTML5 IMA SDK

[Hunter Harbin]

Hi team,

I'm trying to defer loading the HTML5 IMA SDK until a user attempts to play a video on mobile web to avoid wasting bandwidth (~250KB total; 80KB from ima3.js then 170KB from the bridge file it loads) if a user never clicks on the video. The issue I'm having is the IMA SDK is responding with a 400 error (""AdError 400: There was an error playing the video ad. Caused by: AdError 1205: The browser prevented playback initiated without user interaction.") even though I am calling "load()" on the video tag on user action and the video does play after the ad errors on mobile web. 

I'm not sure if the SDK supports this, or if I'm missing something.

If it helps, I can describe the code. 

I have a simple loadScript function that returns a promise that resolves when the IMA SDK has finished loading (shown below).

When a user clicks the video still div "handleClick" (also shown below) is called on that action.

Is there a better (or any) way to do this?

handleClick: function () {

    video.load();

    this.loadScript('https://imasdk.googleapis.com/js/sdkloader/ima3.js', 'imaSdk').then(() => {

          this.adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, video);   // adContainer and video instantiated prior to this

          this.adDisplayContainer.initialize();

    });

}

 loadScript: function (url, id) {

    return new Promise((resolve, reject) => {

        let element = document.createElement('script');

        element.type = 'text/javascript';

        element.id = id;

        element.async = true;

        element.src = url;

        // Important success and error for the promise

        element.onload = function () {

            resolve(url);

        };

        element.onerror = function (e) {

            reject(e);

        };

        document.body.appendChild(element);

    });

}

Thank you,

Hunter

[Hunter Harbin]

I should note that it does actually work on iOS, but not Android. I presume this is because the IMA SDK uses my video tag (that I've called "load()" on) to play the ad. Is there a way to force this same behavior on Android?

Thanks again,

Hunter

[ima-sdk-adv...@google.com]

Hi Hunter,

The SDK requires that the call to adDisplayContainer.initialize() happen as the direct result of a user interaction. There cannot be a break in the call stack. In your case, your 'click' event is triggering another asynchronous event which is then triggering the initialize method. The intermediate step is likely what's causing your issue. While this may currently work for you on iOS, there's no guarantee that it will continue to do so.

Regards,

Chris Feldman

IMA SDK Team

--
You received this message because you are subscribed to the Google Groups "Interactive Media Ads SDK" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ima-sdk+unsubscribe@googlegroups.com.
To post to this group, send email to ima...@googlegroups.com.
Visit this group at https://groups.google.com/group/ima-sdk.
For more options, visit https://groups.google.com/d/optout.

[Hunter Harbin]

Thanks for the response, Chris. So just to be clear, there is currently no way to delay loading the IMA SDK on mobile web until the user clicks? I can't contrive of a way to do this without some asynchronous operations.

On Wednesday, March 28, 2018 at 4:00:28 PM UTC-4, Hunter Harbin wrote:

[ima-sdk-adv...@google.com]

Hi,

That's correct. For better performance, we recommend loading the SDK on page load.

Regards,

Chris Feldman
IMA SDK Team