There may be occasions where you want to show gyro-based ads to your users that use iOS devices (Apple iPhones and iPads).

First and foremost, we cannot emphasize it enough:

All our gyro-based layouts have a fallback, which means that when the user or device has turned off the motion sensor then they can still see and interact with the ad. For eg panorama can be dragged with a finger.
This only affects mobile devices as all desktop devices do not have a gyro sensor.
This does not affect any Android users as they have gyro support turned on by default.
Asking for permission on a publisher site to show some functionality in an ad can seriously penalize the user's satisfaction with the site.

So, this is should only be done when you are 100% sure that your Apple iPhone/iPad owners are likely to give the approval to enjoy our nice gyro effects.

In the unlikely event that you do want to do that we have prepared a step-by-step guide for you. The below checks browser permissions for gyro access and when it's missing, then prompts the user to give that.

Copy this code:

window.addEventListener('DOMContentLoaded', (event) => {
    checkForMotionPermission();
});


/* Pseudo function that continues loading the ad, and depending on the state of gyro we could do something else as well */

function finish(gyro_state) {
    if (!gyro_state) {
        // add some notification for user
    }
    // TODO: show the ad
}


/* Function to check the permissions, called when page loads */

function checkMotionPermission() {
    // check if we have the navigator.permissions object
    if (window.navigator.permissions != null && window.navigator.permissions.query != null) {
        // query for gyro permission
        window.navigator.permissions.query({name:'gyroscope'})
        .then((result) => {
            const state = result.state;
            if (state === 'granted') {
                // gyro is enabled, show the ad with gyro
                finish(true);
            } else if (state === 'prompt') {
                // request permission for user
                requestForMotionPermission();
            } else {
                // on denied state, show the ad without gyro
                finish(false)
            }
        })
        .catch((error) => {
            // on error, show the ad without gyro
            finish(false);
        });
    } else if (window.DeviceMotionEvent != null && window.DeviceMotionEvent.requestPermission != null) {
        // on iOS, request the permission instantly
        requestForMotionPermission();
    } else {
        // on other cases, show the ad without gyro
        finish(false);
    }
}


/* Function to request the permissions, called when needed (recommended to called with user action) */

function requestForMotionPermission() {
    // check if we have the navigator.permissions object
    if (window.navigator.permissions != null && window.navigator.permissions.request != null) {
        window.navigator.permissions.request({name: 'gyroscope'})
        .then((result) => {
            // permission was given, show the ad with gyro
            finish(true);
        })
        .catch((error) => {
            // on error, show the ad without gyro
            finish(false);
        });
    } else if (window.DeviceMotionEvent != null && window.DeviceMotionEvent.requestPermission != null) {
        window.DeviceMotionEvent.requestPermission()
        .then((state) => {
            if (state === 'granted') {
                // permission was given, show the ad with gyro
                finish(true);
            } else {
                // on denied state, show the ad without gyro
                finish(false);
            }
        })
        .catch((error) => {
            // on error, show the ad without gyro
            finish(false);
        });
    } else {
        // on other cases, show the ad without gyro
        finish(false);
    }
}

2. Modify where needed (see the TODO comments above) and add it to your website (see also the tips below).

That's it, only two steps to do. You are all set!

Feel free to reuse it and let us know if you are having difficulties setting it up.

Tips

Add a custom button to ask for permission

Since iOS does not allow to ask the current state of the sensors we would recommend creating a button that would call requestForMotionPermission instead when the user is on:

Android device and the current state is prompt;
iOS device.

Because for iOS users and in general it's always better to trigger the native popup by user action (click on button) instead of it being triggered automatically on page load.

Save user selection in the browser

As well we would recommend saving a cookie about the denied state of the permission when the user is on the iOS device and denied the permission request.

Therefore if the user is already denied the request we would know it without calling the requestPermission method, as we can skip the whole permission requesting and just show the ad without gyro being enabled when the user is on:

Android device and the current state is granted or denied;
iOS device and we have cookie saved saying the user has denied the sensors.