The following guidelines describe Scratch Component implementation and setup. Please follow instructions below to correctly set up the component and change available parameters.
To start with Scratch Component, you have to load it in your index.html document:
<head>
...
<script src="//s1.adform.net/banners/scripts/components/Adform.Scratch.js"></script>
...
</head>See the example of component initialization inside index.html:
<script>
// Create new instance
var banner = document.getElementById('adf-banner');
var background = Adform.getAsset(2);
var clickURL = Adform.getClickURL('clickTAG');
var scratch = new Adform.Scratch({
banner: banner,
width: 0,
height: 0,
image: Adform.getAsset(1),
percentage: 75,
radius: 30,
delay: 0,
zIndex: 0,
intensity: 0.6,
fadeDuration: 500
});
function initialize() {
scratch.init();
banner.addEventListener('click', function() {
mraid.open(clickURL);
});
}
if (window.mraid && mraid.getState() === 'loading') {
mraid.addEventListener('ready', initialize);
} else {
initialize();
}
</script>These are the properties that have to be set in order to complete the setup of Scratch component:
| Parameter | Type | Description |
|---|---|---|
| banner | HTML element | Banner element |
The following settings are not mandatory and have default values:
| Parameter | Type | Default | Description |
|---|---|---|---|
width |
number | clientWidth | Set width to 0 to make it 100% or set fixed dimensions in pixels |
height |
number | clientHeight | Set height to 0 to make it 100% or set fixed dimensions in pixels |
percentage |
number | 50 | Percentage of scratched area to reveal banner |
radius |
number | 20 | Scratch radius in pixels |
delay |
number | 0 | Time in milliseconds to auto-reveal the banner after it gets visible, 0 to disable |
zIndex |
number | null | z-index of scratchable Canvas element, 0 to disable |
intensity |
number | 0.6 | Scratching intensity (must be a number from 0 to 1, otherwise 0.6 will be set) |
fadeDuration |
number | 500 | Length of fading animation when the canvas is being removed |
Code below shows how Scratch component could be setup in HTML5 Standard rich media ad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Mobile Scratch v 2.0</title>
<link rel="stylesheet" href="//s1.adform.net/banners/scripts/components/styles/Adform.Styles-1.css" />
<script src="mraid.js"></script><!-- mraid.js file is loaded externally on mobile web and doesn't need to be served with banner -->
<!-- Components -->
<script src="//s1.adform.net/banners/scripts/components/Adform.Scratch-2.js"></script>
<!-- Components -->
</head>
<body>
<div id="adf-banner" class="adf-Banner adf-Background adf-Border u-sizeFull">
<!-- Logo/Info - feel free to remove these elements -->
<div id="adf-logo" class="adf-Logo"></div>
<div id="adf-info" class="adf-Info">
<div class="adf-Info-title">Mobile scratch</div>
320x250 px
</div>
<!---->
</div>
<script src="scripts/custom.js"></script>
<!-- User code -->
<script>
var banner = document.getElementById('adf-banner');
var background = Adform.getAsset(2);
var clickURL = Adform.getClickURL('clickTAG');
var scratch = new Adform.Scratch({
banner: banner,
width: 0,
height: 0,
image: Adform.getAsset(1),
percentage: 75,
radius: 30,
delay: 0,
zIndex: 0,
intensity: 0.6,
fadeDuration: 500
});
function initialize(){
scratch.init();
banner.addEventListener('click', function() {
mraid.open(clickURL);
});
}
if (window.mraid && mraid.getState() === 'loading') {
mraid.addEventListener('ready', initialize);
} else {
initialize();
}
if (background) {
setBackgroundImage(banner, background);
removeElems('adf-logo', 'adf-info');
banner.classList.remove('adf-Background', 'adf-Border');
}
scratch.on(scratch.CANVAS_READY, function() {
banner.style.opacity = 1;
});
scratch.on(scratch.SCRATCH_END, function() {
Adform.sendEvent(Adform.EVENT_CUSTOM_1);
});
</script>
<!-- User code -->
</body>
</html>