Sizmek Formats
HTML5 Coupon Block
Build Guide
Table of Contents
Overview...............................................................................................................................................2
SupportedPlatforms..........................................................................................................................2
ImplementingtheCouponBlockFeature...............................................................................................2
IncludedBlockFiles............................................................................................................................3
ImplementingtheHTML5CouponBlock.............................................................................................4
DesigningYourCoupon......................................................................................................................5
CustomInteractions...........................................................................................................................6
ChangeLog.........................................................................................................................................6
Overview
TheHTML5CouponBlockfeatureallowsyoutoaddaCoupontoyourad.Thebasicfunctionalityallows
userstoeitheropenthecouponinanotherwindowoutsidethead,orprintthecoupon.Printinga
couponisavailablefromeithertheadorfromtheopenedwindow.Whenprintingacoupon,asystem
promptwillbeshownforcontrollingyourprintparameters.Duetolackofsupport,werecommendnot
usingtheprintoptiononmobiledevices.
Thepagethatisopenedoutsidethead(andthatshowsyourcoupon)maybecustomized.Thesample
imagesbelowshowsbothatypicaladaswellastheadopenedonitslandingpage.
Thedemoadshowsacoupon,anopenbutton,andaprintbutton.Ifyouviewtheadonamobiledevice,
theprintbuttonwilldisappear.
You must have beginner knowledge of HTML and JavaScript to implement this feature. If you
know how to author HTML creatives, then you should have no problems creating this ad.
Supported Platforms
Platform
Windows
SupportedVersion
InternetExplorer9+,Firefox,Chrome,Safari
Mac
Firefox,Chrome,Safari
iPhone
iOS6.0andlater
iPad
iOS6.0andlater
Androidphone
Android2.3andlater
Androidtablet
Android4.0andlater
Implementing the Coupon Block Feature
BeforeyouBegin
Makesureyouhavethefollowingresourcesavailable:
Copyright © 2014 Sizmek, Inc. All rights reserved.
2
TheHTML5CouponBlockWorkspace.TodownloadaWorkspace,pleasevisittheFormats&
FeaturestaboftheCreativeZone.Formoreinformation,contactyourCreativeDevelopment
Specialist.
IncludedBlockFiles
AfteryoudownloadtheCouponblockworkspace,unzipittorevealthefilesthatareusedinthedemo.
Thefollowingfilesarecriticaltothecouponblockandshouldbecopiedovertoyourad.Thefiles
include:
•
FileName
Description
coupon/coupon.js
AJavaScriptfilecontainingcodefortheopeningand
printingcoupons.
Thefollowingfilesareusedtodemothecouponblockandarenotrequiredinyourad.Youmaywishto
studythefilestounderstandhowtoimplementtheCouponblock.
FileName
Description
readme.txt
Detailsaboutincorporatingandcustomizingthe
Couponblockcodeinyourad.Mostofthis
informationisrepeateddownbelowinthisbuild
guide.
coupon_sample.html
HTMLfileforbuildingouttheCoupondemo
couponPage/coupon.html
ContainsanHTMLpageopenedbytheprintfunction.
Thepageshowsthecouponandopensaprint
dialogue.Youcancustomizethelookandfeelofthe
printpageifyouwish.
couponPage/images/coupon.jpg
ThecouponimageusedonthecouponHTMLpage.
images/backup.jpg
Backupimageusedforad
images/logo.png
Logousedforad
style.css
CSSfilecontrollingthelayoutoftheCoupondemo
Copyright © 2014 Sizmek, Inc. All rights reserved.
3
Implementing the HTML5 Coupon Block
Add and edit the following code to the header of your ad HTML:
<script type="text/javascript" src="coupon/coupon.js"></script>
You can use the code from “coupon.js” to create a coupon in your own JavaScript. Here is an example
showing how to create a coupon:
var couponConfig = {
url: getAbsoluteAssetURL("/couponPage/coupon.html"),
closeAfterAutoPrint: true,
interactions: {
open: function () { EB.clickthrough("Open_Coupon"); },
print: function () { EB.clickthrough("Print_Coupon"); },
printFromCouponWindow: function () {
EB.clickthrough("Print_Coupon"); }
}
};
var coupon = new Coupon(couponConfig);
First you create an object containing the configuration you would like to use for your coupon. The
properties of this object are shown in the following table.
Coupon Configuration Properties
Property
Type
Description
url
String
The absolute URL for your coupon.
closeAfterAutoPrint
Boolean
Determines if the coupon window will close after the
user prints it. The default value is false.
interactions
Object
The interactions object contains functions you can
use to track interaction with the coupon.
interactions.open
Function
Assign this property to a function you would like to
use to track opening the coupon. For example, a
function that calls EB.clickthrough or EB.userAction
with your desired interaction name.
interactions.print
Function
Assign this property to a function you would like to
use to track printing the coupon. For example, a
function that calls EB.clickthrough or EB.userAction
with your desired interaction name.
interactions.
printFromCouponWindow
Function
Assign this property to a function you would like to
use to track printing the coupon from the coupon
window. For example, a function that calls
EB.clickthrough or EB.userAction with your desired
Copyright © 2014 Sizmek, Inc. All rights reserved.
4
interaction name.
You can then pass this object into a new Coupon object. Notice that the URL is set using a function
called “getAbsoluteURL”. This function takes the URL or the coupon relative to your main HTML file, and
returns the absolute URL of your coupon. This function is included in “coupon.js” and should be used if
your coupon is going to be hosted by Sizmek along with the rest of your ad.
Note that the properties of your coupon can be modified at any time like so:
coupon.url = "http://www.mynewcoupon.com/coupon.jpg";
coupon.closeAfterAutoPrint = false;
The coupon also has methods available to open or print the coupon. These methods are described in
the table below.
Coupon Methods
Method
Example
Description
open
coupon.open(); Opens the coupon in a new window at the desired width and height.
print
coupon.print();
Opens the coupon in a new window with a print dialogue.
Recommended for desktop browsers only. If “closeAfterAutoPrint” is
set to true, the coupon will close after the print dialogue is closed.
The coupon page included in the template includes a print button so that users can easily print the
coupon after they open it. However, since the coupon page is separate from the ad, a workaround is
necessary to track clicks on this print button. In order to track clicks on the print button on the coupon
page, assign a tracking function to the interactions.printFromCouponWindow function in the coupon
configuration object. You may wish to use a clickthrough function or a userAction function. For example:
var couponConfig = {
url: getAbsoluteAssetURL("/couponPage/coupon.html"),
closeAfterAutoPrint: true,
interactions: {
open: function () { EB.clickthrough("Open_Coupon"); },
print: function () { EB.clickthrough("Print_Coupon"); },
printFromCouponWindow: function () {
EB.clickthrough("Print_Coupon"); }
}
};
var coupon = new Coupon(couponConfig);
Designing Your Coupon
Whenyouprintoropenthecoupon,theblockopensupanewHTMLpagecontainingthecoupon
(couponPage/coupon.html).Ifyouchosetoprintthecoupon,aprintdialoguewillautomaticallyappear.
Copyright © 2014 Sizmek, Inc. All rights reserved.
5
Youcanswapoutthecoupononthispageandaddinyourowndesignandfunctionality.YoucanuseCSS
mediaqueriestochangewhatdisplaysonthepageandwhatdisplaysontheprintedcoupon.For
example,thetemplateusesthefollowingCSSmediaquerytohidetheinstructionsandprintbuttonon
theprintedpage.
@media print {
.instructions, #print-button {
display:none;
}
}
Youcanuse“@mediascreen{/*YourCSS*/}”tospecifyCSSthatshouldonlyapplytothescreenand
nottheprintedpage.
Custom Interactions
ThefollowingcustominteractionsarereportedbyanadwiththeHTML5CouponBlockandcanbe
reviewedinSizmekreporting:
InteractionName
Description
Open_Coupon
Tracksopeningthecouponpage.
Print_Coupon
Tracksprintingthecouponpage.
Theinteractionnamescanbechangedasdesired.
Change Log
March4,2016
• AddedFeatureTracking
July21,2014
• RebrandedforSizmek
Copyright © 2014 Sizmek, Inc. All rights reserved.
6
Notice
The information contained in this document is proprietary and confidential to Sizmek
and/oranyofitsaffiliatedcompanies.Disclosure,copying,reproduction,storingoranyuse
ofthisdocumentoranypartthereofwithouttheexpressprior,writtenconsentofSizmek
or its authorized representatives is strictly prohibited. The information furnished in this
documentisbelievedtobeaccurateandreliable.Howevernoresponsibilityisassumedby
Sizmek for the use of this information. Sizmek reserves the right to make changes to the
informationincludedinthisdocumentatanytimeandwithoutnotice.
Copyright©2014Sizmek.Allrightsreserved.
FlashiseitheraregisteredtrademarkortrademarkofAdobeSystemsIncorporatedintheUnitedStatesand/orothercountries.
TrademarkNote:Sizmek,theSizmeklogo,SizmekRichMedia,SizmekMobile,SizmekVideo,SizmekChannelConnect,SizmekWorkshop,etc.aretrademarksand/orregisteredtrademarksofSizmek.Allother
trademarksarethepropertyoftheirrespectiveowners.
Copyright © 2014 Sizmek, Inc. All rights reserved.
7