PRODUCT
Follow

Overview

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

Demos/Downloads

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

Template

Sizmek_Accelerometer_4_0_0.zip

Demo

Preview demo

Supported Platforms

Platform

Supported Version

iPhone

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

iPad

iOS 10.0 and later

Android

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.

 

 

Assets

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

      Filename

Description

config.js

Sizmek Manifest File

images/back.jpg

Demo Background image

images/DefaultImage300x250.gif

Demo Default Backup image

images/logo.svg

Demo logo image

images/sizmek_logo.jpg

Demo image asset

index.html

Demo HTML Index file

scripts/accelerometer.js

Ad Feature Javascript file

styles/styles.css

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.

Procedure
  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="http://ds.serving-sys.com/…/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]);

           </script>

  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);

     </script>

Ad Feature Class Parameters

      Parameter

Type

Description

offset

Array

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

Method

Description

orientationData

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

orientationDataSupported

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

None

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: https://szmk.io/tools/qtg/gen.html

  • 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

Comments