PRODUCT
Follow

Overview

Introduction and Screenshots

The Scratch and Reveal ad feature allows the developer to simulate a scratch effect, letting the user scratch away a top layer to reveal a separate image below.

In the template provided, the two images are loaded on top of one another with the top image covering the bottom image. As the user moves the mouse (or swipes the ad on mobile), the top image is "scratched away" revealing the image below. Options available include cursor size and auto clear options that allow the developer to clear away the top image after a pre-determined time or percentage.  

scratch_1.jpg  scratch_2.jpg   scratch_3.jpg  

Demos/Downloads

The following table provides links to the template and demo for the Scratch and Reveal Ad feature.

Template

Sizmek_Scratch_and_Reveal_4_0_0.zip

Demo

Preview Demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 11+, Edge, Firefox, Chrome

Mac

Firefox, Chrome, Safari

iPhone

iOS 9.0 and later

iPad

iOS 9.0 and later

Android

Android 6 and later( including tablets)

Assets

Workspaces Available

The Scratch And Reveal ad feature includes one Workspace directory built using the HTML5 Polite Banner. 

Included Workspace Files

      Filename

Description

config.js

Sizmek Ad Manifest file

images/clear.jpg

Background image file for Clear button

images/cover_image.jpg

Scratch and Reveal demo top image (image that is scratched away)

images/default.jpg

Default image file

images/hidden_image.jpg

Scratch and Reveal demo bottom image (image that is revealed)

images/reset.jpg

Background image file for Reset button

index.html

Scratch and Reveal demo HTML file

scripts/scratchAndReveal.js

Scratch and Reveal JavaScript library file

styles/styles.css

Scratch and Reveal stylesheet 

  

Implementing the Ad Feature

Adding the Ad Feature to Your Workspace Code

Prerequisite

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

  • Scratch and Reveal Ad Feature Files
Procedure

The following steps illustrate how to add the Scratch and Reveal ad feature to your creative Workspace.

  1. Add the Scratch and Reveal Feature Javascript file to the head of your index.html file.

    Note: The file path has been shortened for simplification.


    <script type="text/javascript" src="scripts/scratchAndReveal.js"></script> 
  1. Include the Adkit JavaScript include after the feature script.

    <script type="text/javascript" src="http://ds.serving-sys.com…/adkit.js"></script> 
  1. Include the Scratch and Reveal stylesheet. 

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

  1. Add and edit the following code to your HTML file's body element. For a full list of options, see the Scratch and Reveal Configurations table below: 

    <script type="text/javascript">

var config = {
targetDivID: 'scratchContainer',
cover: './images/cover_image.jpg',
brushSize: 20,
percentClearToComplete: 65,
handleResize: true,
onReadyCallback: onScratchReady
};

var scratch = new ScratchAndReveal(config);

function onScratchReady() { // do something on ready }
</script>
  1. Use the available methods to clear and reset the cover image. For a full list of methods, see the Available Methods table below: 

    <script type="text/javascript">

var scratch = new ScratchAndReveal(config);

scratch.complete();

</script>

Scratch and Reveal Configurations

Message

Parameters

Description

targetDivId

String

The element id of the div you wish to place the scratch object

cover

String

The image path of the cover image that is scratched away 

brushSize

Number

Determines the size of the cursor point when scratching 

percentClearToComplete

Number

The percentage of the top image that has been scratched away at which the top image automatically clears away on mouse up

noUIAutoCompleteTime

Number

The number of milliseconds without an initial UI to trigger an autocomplete

breakInUIAutoCompleteTime

Number

The number of milliseconds between UI to triger an auto complete

removeTargetDivOnComplete

Boolean

remove the scratch div on complete

handleResize

Boolean

resize scratch area on window resize

onReadyCallback

Function

Callback is initially dispatched when the scrape object is visible. Additionally is dispatched on restore

onUIStartCallback

Function

Callback is dispatched at each UI start, mousedown / touchstart

onUIEndCallback

Function

The callback is dispatched at each UI end, mouseup / touchend

onCompleteCallback

Function

Callback is fired at percentClearToComplete goal reached or when forceComplete is called

Available Methods

Method Name

Description

restore

Restors the initial state of the content.
This function will;
Clear all UI related timeouts.
Set the target div to it's initial display value if removeTargetDivOnComplete is not set to false.
Apply the initial sate of the cover content, fill or image.
Restart the UI timers if any are set in the configObj.
Fire the onReadyCallback callback function if one is set in the configObj

getCanvasID

Returns the dynamically generated ID attribute of the canvas tag injected in the target div.
The ID is created as follows: the target div id with "_scrapeCanvas_" and a 10 digit random number string appended

getPercentClear

Returns a number between 0 and 100 rounded to the 100th which represents the percentage of the canvas currently at opacity 0.
Percentage complete is only calculated / updated on mouseup or touchend

forceResize

Calls the "resizeCnvs" function.
resizeCnvs function requires the target div to maintain it's initial aspect ratio.
resizeCnvs scales the brush by the new scale factor to match existing brush strokes

clearAutoCompleteTimer

Clears any running timeouts currently running.
This should be fired by the creative prior to forcing a complete, clickout, etc

complete

Calls the "complete" function.
This function will;
Clear all UI related timeouts.
Remove the target div if removeTargetDivOnComplete is not set to false by setting it to display none.
Fire the onCompleteCallback callback function if one is set in the configObj

 

Setting Up the Scratch and Reveal Ad Feature in the Sizmek Platform

Sizmek MDX Setup

Archive the Scratch and Reveal 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 the 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 the Creative menu item > Ads and click the New Ad button 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

Interaction Name

Description

Scratch_and_Reveal_Start

User has started scratching the top image

Scratch_and_Reveal_Complete

Top image has been cleared away

Scratch_and_Reveal_Reset

Scratch Object has been reset

Scratch_and_Reveal_Clear

Scratch Object has been cleared

 

 Known Issues

  • The mouse will continue to scratch after mouse up outside of the ad. A 3-second timeout has been added to end scratch action if the mouse does not re-enter the ad

Change Log

June 15, 2018

  • Updated to latest Feature script template - 2.0.6
  • Migrated away from the third-party wScratchPad Library
  • No longer requires jquery
  • Added functionality to handle resize issue in previous release

May 25, 2017

  • Migrated to the Sizmek Advertising Suite
  • Updated wScratchPad Library
  • Update jQuery
  • Update overall performance

March 09, 2016

  • Updated for AdKit
  • Added Feature Tracking 

December 09, 2013

Initial Release

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

Comments