Introduction and Screenshots

The Sizmek Accelerometer ad feature takes advantage of the device orientation hardware, or accelerometer, found in smart devices and allows developers to manipulate HTML elements within their creative using the data provided by this hardware. This includes alpha (compass direction or movement around the y axis), beta (movement around the x axis) and gamma (movement around the z axis).

Note: This Ad Feature no longer requires the PL_Accelerometer.js Custom Script 

2.jpg  1.jpg


The following table provides links to the template and demo for the Accelerometer ad feature.



Preview demo

Supported Platforms


Supported Version


iOS 10.0 through 12.1 (sensor data blocked by default beginning in 12.2)


iOS 10.0 and later


Android 6 and later (including tablets) (only allowed on secure HTTPs origins)

Understanding Device Orientation

The Ad Feature script will pass three parameters to the orientationData event listener. These are Alpha, Beta, and Gamma, or commonly referred to as yaw, pitch and roll, respectively. The image below illustrates what these terms represent.




Workspaces Available

The HTML5 Accelerometer Ad Feature includes one Workspace for a working demo, using the HTML5 Polite Banner Format. 

Included Workspace Files

Polite Template




Sizmek Manifest File


Demo Background image


Demo Default Backup image


Demo logo image


Demo image asset


Demo HTML Index file


Ad Feature Javascript file


Demo Stylesheet


Implementing the Ad Feature

Before you begin, make sure you have the following resources available:

  • Accelerometer Ad Feature Files 

Add the Ad Feature to your Workspace Code

The following steps illustrate how to add the Accelerometer Ad Feature to your creative Workspace.

  1. Add the JavaScript included in the download to the head of your index.html file.
  2. Add the Sizmek AdKit include to the head of your index.html file.

    Note: file path has been shortened for simplification.

  3. Add Stylesheet to the head of your index.html file:


    <script type="text/javascript" src="scripts/accelerometer.js"></script>

    <script type="text/javascript" src="…/adkit.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/styles.css"/>

  1. Instantiate your accelerometer class with the optional Offset parameter:
    • Offset: An Array


    <script type="text/javascript">

          var accelerometer = new Accelerometer([0,45,0]);


  1. Add event listeners for orientationData and orientationDataSupported:
    • orientationData: passes alpha, beta and gamma.
    • orientationDataSupported: passes false if not supported.


    <script type="text/javascript">

          var accelerometer = new Accelerometer([0,45,0]);

          accelerometer.addEventListener("orientationData", handleData, false);

          accelerometer.addEventListener("orientationDataSupported", notSupported, false);


Ad Feature Class Parameters






An array of three values for alpha, beta and gamma which represent any offset value you wish you add to your positioning values.

ex: [0, 45, 0] 

Ad Feature Public Methods




Event Listener: Passes three values through the event for alpha, beta and gamma.


Event Listener: Passes false if not supported.

Setting Up the Accelerometer Ad Feature in the Sizmek Platforms

Sizmek MDX2.0 Setup

Archive the Accelerometer workspace into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.

  1. Zip and upload the HTML5 Workspace Folder found in the template folder.
  2. Log into the MDX2.0 platform.
  3. Click on ManageCreative Assets, and upload your Workspace to the appropriate asset folder
  4. (Optional) Rename the folder.
  5. From the main menu, select Shortcuts > Create New Ad > Create a New Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the format type drop-down.
  8. Choose the HTML5 Workspace Folder you uploaded to platform.
  9. Save.

Sizmek Advertising Suite Setup

  1. Zip the HTML5 Workspace Folder found in the template folder.
  2. Log in to the Sizmek Advertising Suite.
  3. Click the Creative menu item > Asset Library, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. Click Creative > Ads and click New Ad and select Blank Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the Ad Format drop-down.
  8. Under Main Assets select the Workspace folder and default image.
  9. Save

Custom Interactions


Known Issues

  • Secure protocol is required when using device orientation
  • Requires a smart device with device orientation capabilities.
  • Browser fires unexpected Orientation Data event that breaks demo if the user moves between browser tabs. more than 25 times. Included a buffer flag to accommodate this issue.
  • Not supported in Firefox on Microsoft Surface devices.
  • Not supported in Safeframes or Unfriendly iframes
  • The Sizmek platform does not support previewing the Accelerometer feature at the ad level. We recommend creating a placement tag and using the placement ID with the Quick Test Generator tool located here:

  • iOS 12.1 and above by default restrict access to device orientation data. This setting can be turned off in Safari settings.

Change Log

October 12, 2018 - 4.0.0

  • New EB.API introduced for DEVICE_ORIENTATION allowing all device data to be handled within the feature script, removing the need for a custom script. 
  • Removed custom script

 July 13, 2018 - 3.0.0

  • Updated Custom Script to address a bug that caused initial orientation to be inconsistent across devices.
  • Updated Feature Script to latest Feature template, 2.0.6
  • Updated Feature Script to address whether device orientation was not supported or receiving no data
  • SAS version migrated to SAS Custom Script
  • Updated Workspace branding

October 19, 2016

Updated to Adkit, migrated to the Sizmek Advertising Suite.

May 19, 2016

Update – Change in browser specifications blocked developers from adding the "deviceorientation" listener to the creative's iframe. This update includes a new custom script that places the listener on the parent window and communicates the corresponding data to the creative. The creative script has been updated to include listeners for device orientation data events.  

December 9, 2014

Initial Release

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request