Creating a Drag2Reveal Creative only takes a few minutes.
All you need are two JPG images.
2022.12
Spec sheet - Drag2Reveal
Required assets
Drag2Reveal
Upload any JPG image for the two Drag2Reveal images.
Note: If you are using the effect to directly compare two images (e.g. for different hair or car colors), make sure that both images match exactly.
Optional images
You can upload any PNG or JPG image for the CTA, logo and overlay images.
Logo.PNG
CTA.PNG
Supported Formats
Mobile formats 300x250 - Medium rectangle 320x50 - Mobile leaderboard 320x320 - Mobile square 320x480 - Interstitial
Desktop formats 120x600, 160x600 - Skyscraper 300x250 - Medium rectangle 300x600 - Half-page 728x90 - Leaderboard 800x250, 970x250 - Billboard
Custom formats You can create any size as a custom format.
Responsive
The Drag2Reveal format supports Responsive behaviour. Both automatic and customized Responsiveness is available.
Supported URLs and Tracking
Clickout URLs
General * Main * CTA
Integrated tracking
General * CTR * Visibility * Dwell time * Engagement
Special * Full reveal
2022.12
Upload assets
Upload images for Drag2Reveal
For the Drag2Reveal you need an image without an alpha channel, so any JPG image is great. (PNG images will also work, just make sure that they don't not use an alpha channel.)
Note: The Drag2Reveal images are shown in "full-screen". So make sure that all uploaded images have the same aspect-ratio as the Creative. Otherwise the image will appear stretched. Drag and drop a JPG image onto one of the thumbnails to upload it.
Image
x
x
CTA
x
x
Video
x
x
Text
x
x
2022.12
Elements
Add Logo or Button
Click "+ Add Element" to create additional layers to the Creative. Element A/B/C will create a layer which is linked to the Image FX and drawn on top of it. So for each Element you can upload different images which will switch together with the main Image.
Remove Element
The removed element will be hidden. But you can turn it back on again at any time. No layout information will be lost.
Image
x
x
CTA
x
x
Video
x
x
Text
x
x
2022.12
Settings
Border
Creates a boarder around the canvas. Use the color picker to define the border color.
Background
Use the color-picker to chose a background color. Note: In some formats the whole background can be covered by other Elements. So the background color is not always visible.
Use the Color picker to chose a color.
Responsive
Enable
Check the box to enable Responsive behaviour. This will turn on the automatic Responsive behaviour and enable additional Responsive features in the respective Elements.
Aspect
Turn "Aspect Limits" on to define the minimum and maximum Aspect ratio allowed for the responsive feature. Aspect ratios below and above the defined range will create borders to fill the target area.
Scale
Defines the scaling behaviour of an individual Element.
Fixed - Does not scale at all. Scale up - Scales up to the larger width or height. Cropping may occur. Scale down - Scales down to the smaller width or height. No cropping will occur. Scale Width/Height - Scale so that the size relative to the width/height stays the same.
Position
Defines the repositioning behaviour of an individual Element.
Pin - Move at a fixed distance to the anker point. Relative - Move with a relative distance to the anker point.
Aligning
By default the aligning is turned to "automatic". In this mode the aligning behaviour is automatically set, depending on the position of the Element on the canvas.
Turn on "Align custom" to enable customized aligning behaviour and chose between "Left/Center/Right" and "Top/Center/Bottom" aligning for the selected Element.
Weight optimization
Set the maximum Quality of all JPG images. By default the Quality is set to "90%".
To reduce the weight of your banner, just chose a lower quality setting and all images will be re-encoded to fit the new setting. You can see the resulting size in kb in the header under "Estimated weight:".
Note: All uploaded JPG images which have a lower quality will not change at all, so your banner will never become larger than the original assets. Only Images with a higher quality will be re-encoded to match the defined quality.
Image
x
x
CTA
x
x
Video
x
x
Text
x
x
2022.12
Tracking & URLs
Click URL
You can set the Clickout URL directly here by adding the URL into the "Main/Default" field. Or you can overwrite the URL in the Tags.
Tracking
Impression
Once the Creative is loaded, this TAG is fired.
Measurable
Once the Creative is loaded and Primo can detect viewability this TAG is fired. The number of measurables is maximum the number of impressions.
Viewable
Once the Creative is loaded and viewability is detectable Primo fires this TAG when at least 50% of the Creative was visible for at least 1s.
Touch Down
Is triggered as soon as the mouse is down (Left click) anywhere over the Creative.
Mouse Enter
Is triggered as soon as the mouse is over the Creative.
Reveal
Tracks when the user has pushed the Drag2Reveal bar to the left or right.
Image
x
x
CTA
x
x
Video
x
x
Text
x
x
2022.12
Preview
Live view
The Preview shows your interactive Creative exactly as it will be shown when it is live. All changes will be shown immediately in realtime.
Timeline controls
Play/Pause toggles between Play and Pause mode. Reset sets the time to 0 and restarts all animation from the beginning Timeline - Use the slider to set the current time Current time - Type in the current time directly Repeat - Turn Repeat on to make the animation restart when the end of the animation has been reached.
Zoom
By default the Zoom is set to 100%. Setting it to 50% or 75% makes the Preview smaller, so that even large Creatives can fit to very small screens. Setting it to 150% or 200% shows the Preview larger, so that you can check for details or simulate higher resolutions.
Responsive sizes
Click on one of the icons to set your preview to the most common formats on mobile devices. Or hold the lower left edge of the Creative preview and move it to any custom size.
Event output
The Event output shows all events that are triggered in realtime. By default all common events are automatically integrated, including CTR, viewtime, engagement and more.
