Sizmek Ad Feature. Twitter HTML5 Build Guide

Transcription

1 Ad Feature Twitter HTML5 Build Guide

2 Table of Contents Overview... 2 Supported Platforms... 2 Demos/Downloads... 2 Known Issues... 3 Note... 3 Included Files... 4 Implementing the Twitter Ad Feature... 5 Configuring the Twitter Feed Template... 5 Configuring the Twitter Widget Template... 9 Setting Up the Twitter Ad Feature in Sizmek MDX

3 Overview The HTML5 Twitter Ad Feature lets an advertiser display its brands Tweets within their ad creative. This Ad Feature includes two (2) templates: 1. Twitter Widget (Recommended) a. Uses Twitter s own Embedded Timelines widget b. Allows for Retweet and Reply c. Does not require Sizmek FileSnap d. Easily customizable 2. Twitter Feed a. Shows a predetermined number of tweets from the Twitter account. b. Allows for Retweet and Reply c. Requires Sizmek FileSnap Supported Platforms Platform Windows Mac Supported Version Internet Explorer 9+, Firefox, Chrome, Safari Firefox, Chrome, Safari Platform iphone ipad Android Supported Version ios 5.0 and later ios 5.0 and later Android 2.3 and later (including tablets) Demos/Downloads Copyright 2015 Sizmek. All rights reserved. 2

4 To download the Ad Feature, view a demo, or get the latest copy of the build guide, please visit the Ad Features page on Sizmek Showcase. For more information, contact your Creative Development Specialist. Known Issues Note On some mobile devices, when the user clicks through from the ad to a mobile Twitter page, the page may come up blank and display a message which reads Sorry, that page doesn t exist. Maybe try a search? instead of showing the actual Twitter content. The Twitter Feed Template uses the Sizmek FileSnap Service. Please contact your Sizmek Account Manager to enable your Twitter FileSnap Feed. According to Twitter: Twitter does not rate limit the display of its embedded timeline products. An embedded timeline is tracked through a widget identifier created during the embedded timeline setup process at o However: it is recommended that the Twitter Widget code be implemented on expansion only to avoid exceeding Twitter rate limits. o Please see Twitter s documentation for more details regarding usage. We strongly recommend including backup context within the Twitter Widget anchor tag to provide an alternate experience in the event that Twitter server s are down. Copyright 2015 Sizmek. All rights reserved. 3

5 Included Files Feed Template Filename css/feature_styles.css images/defaultimage300x250.gif index.html js/twitter.js Description Sizmek Feature Stylesheet Sizmek Feature Default Image Sizmek Feature HTML5 file. Sizmek Feature Javascript file. Widget Template Filename css/feature_styles.css images/defaultimage300x250.gif index.html panel/css/feature_styles.css images/defaultimage300x250.gif index.html Description Sizmek Feature Stylesheet Sizmek Feature Default Image Sizmek Feature HTML5 file. Sizmek Feature Panel Stylesheet Sizmek Feature Panel Default Image Sizmek Feature Panel HTML5 file. Copyright 2015 Sizmek. All rights reserved. 4

6 Implementing the Twitter Ad Feature Before you begin, make sure you have the following resources available: HTML5 Twitter Ad Feature Files Twitter Widget code FileSnap for Twitter Feed (if applicable) Configuring the Twitter Feed Template The following code example shows how to add the Twitter Feed Template to your creative. Please note: some file paths have been shortened for simplification. 1. Add JS and CSS includes to your index.html file <link href="twitter/twitter.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="js/mmclientdetector.js"></script> <script type="text/javascript"js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script> <script type="text/javascript" src="js/twitter.js"></script> 2. Add and edit the following to the body of your index.html file and instantiate your script. <script type="text/javascript"> var twitterfeedconfig = { container: "twitterfeed", feedsnapurl: " width: 300, height: 250, actionregister: function(){ EB.clickthrough("Twitter_Reply_Clicked"); EB.clickthrough("Twitter_Retweet_Clicked"); EB.clickthrough("Twitter_Link_In_Tweet_Clicked"); } }; var mytwitter = new twitterfeed(twitterfeedconfig); </script> Copyright 2015 Sizmek. All rights reserved. 5

7 Update the Parameters below as needed. Twitter Feed Parameters: Parameter Type Description Default container String The div id that you will write the Twitter Block to. feedsnapurl String The URL of your mirrored file width Integer Number of pixels for the Twitter Block width height Integer Number of pixels for the Twitter Block height 3. Customize your Twitter Ad Feature event names. Event names can be customized by changing the event name prefix. To change the event name prefix, edit the following four lines in step 2 by changing Twitter to the name you desire. EB.userActionCounter("Twitter_Reply_Clicked"); EB.userActionCounter("Twitter_Retweet_Clicked"); EB.userActionCounter("Twitter_Link_In_Tweet_Clicked"); 4. Customize your Twitter Ad Feature by adding options and templates. The configuration will construct in following format. <script type="text/javascript"> var twitterfeedconfig = { container: "twitterfeed", feedsnapurl: " width: 300, height: 250, actionregister: function(){ EB.clickthrough("Twitter_Reply_Clicked"); EB.clickthrough("Twitter_Retweet_Clicked"); EB.clickthrough("Twitter_Link_In_Tweet_Clicked"); }, Copyright 2015 Sizmek. All rights reserved. 6

8 options: { maxtweet: 20, eventnameprefix: mytwitter }, templates: { screenname: }, customcss: [.twitter.header =.myheader,.twitter.screenname =.myscreenname ] var mytwitter = new twitterfeed(twitterfeedconfig); </script> Twitter Feed Options: Options Type Description Default headerheight Integer Header in the Twitter Ad Feature refers to the portion of user profile image and screen name, this value is use to define the height of the header in number of pixels 24 maxtweet Integer Number of max tweet will be displayed 10 (Max 20) eventnameprefix String The prefix of the custom click through event name and user interaction name Twitter showprofileimage Boolean Display user profile image or not True showscreenname Boolean Display user screen name or not. true showreply Boolean Display reply link or not. true showretweet Boolean Display retweet link or not true blocklinksintweet Boolean Deactivate all the links in tweets false blockuserlink Boolean Deactivate user screen name links in tweets false blockhashtaglink Boolean Deactivate hashtag search links in tweets false Copyright 2015 Sizmek. All rights reserved. 7

9 blockhyperlink Boolean Deactivate hyperlinks in tweets false Twitter Feed Templates: Template name Type Description Default screenname String The look of the screen name, you can customize your screen name by using this template. Note: Please use {SCREEN_NAME} in template, {SCREEN_NAME} will be replace with real screen name from Twitter feed {SCREEN_NAM E} reply String The look for the reply link in tweet Reply retweet String The look for the retweet link in tweet Retweet Twitter Feed Styles Style name.twitter.header.twitter.profileimage.twitter.screenname.twitter.stage.twitter.tweet.twitter.tweetfooter.twitter.reply.twitter.retweet.twitter.tweetuserlink Description Header style. Header in the Twitter Ad Feature refers to the portion of user profile image and screen name User profile image style User screen name style The style of inner div that writes the Twitter Ad Feature The style of a tweet The style of the portion that display Reply and Retweet links Reply link style Retweet link style The style of user screen name link in tweet Copyright 2015 Sizmek. All rights reserved. 8

10 .twitter.tweethashtaglink.twitter.tweethyperlink The style of hashtag search link in tweet The style of hyperlink in tweet Twitter Feed Methods Method Name Description getstatus Get current status for Twitter Bolck. It will return 0, 1, or 2 when the method called. refresh Twitter Block initialized Data loaded for Twitter Block Twitter Block rendered Refresh the Twitter Block Custom Interactions The following custom interactions are reported by an ad with the HTML5 Twitter Ad Feature and can be reviewed in Sizmek reporting. Interaction Name Twitter_Link_In_Tweet_Clicked Twitter_Reply_Clicked Twitter_Retweet_Clicked Description Link in Tweet has been clicked. This may include either a URL, hash tag (e.g. #Sizmek) or a name Reply link in tweet has been clicked Retweet link in tweet has been clicked Configuring the Twitter Widget Template The Twitter Widget Template utilizes Twitter s own Embedded Timeline Widget. By using Twitter s Widget script, the bulk of the development is handled by Twitter making it an extremely easy way to add Twitter functionality to your advertising. Follow the steps below to add this Feature to your creative. Copyright 2015 Sizmek. All rights reserved. 9

11 1. Visit the following link to create your custom Twitter Widget code. a. Enter the username of the Twitter account you wish to display. b. Choose which options you want i. Exclude replies ii. Auto Expand Photos c. Chose your desired height default 600 px d. Chose a theme Light/Dark e. Chose Link Color f. Click the Create widget button. g. Copy the code snippet provided 2. Within the Sizmek Twitter Widget Template, open the index.html file found in the panel directory. 3. Paste the widget code snippet from step g, as indicated below: <!-- Place Twitter Widget Code Here --> <a class="twitter-timeline" href= data-widget-id=" " data-chrome="noheader noborders" data-tweet-limit="3"> Tweets </a> <script>!function(d,s,id){var js,fjs=d.getelementsbytagname(s)[0],p=/^ tbyid(id)){js=d.createelement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.pa rentnode.insertbefore(js,fjs);}}(document,"script","twitter-wjs");</script> <!-- End Twitter Widget Code --> 4. To customize widget components you can add the data-chrome and data-tweet-limit attributes to the snippet anchor tag as shown below. <a class="twitter-timeline" href= data-widget-id=" " data-chrome="noheader noborders" data-tweet-limit="3"> Tweets </a> Copyright 2015 Sizmek. All rights reserved. 10

12 <script>!function(d,s,id){var js,fjs=d.getelementsbytagname(s)[0],p=/^ tbyid(id)){js=d.createelement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.pa rentnode.insertbefore(js,fjs);}}(document,"script","twitter-wjs");</script> <!-- End Twitter Widget Code --> The widget components listed below can be added to the data-chrome attribute. Interaction Name noheader nofooter noborders noscrollbar Transparent Description Hides the timeline header. Hides the timeline footer and Tweet composer link, if included in the timeline widget type Removes all borders within the widget including borders surrounding the widget area and separating Tweets Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website Removes the widget s background color 5. In the event that Twitter servers are down, we recommend including a backup content within the Twitter Widget anchor tag. <a class="twitter-timeline" href= data-widget-id=" "> <div id= altcontent >Place alternate content here</div> </a> Copyright 2015 Sizmek. All rights reserved. 11

13 Setting Up the Twitter Ad Feature in Sizmek MDX 1. Zip and upload the HTML5 Workspace Folder found in each template folder to your Creative Assets folder. Rename the folder if desired. 2. From the main menu, select Shortcuts > Create New Ad > Create a New Ad. 3. In the Ad Name field, enter the unique name of your ad. 4. From the Ad Format drop-down list, select HTML5 Polite Banner. 5. Choose the HTML5 Workspace Folder you uploaded to platform. 6. Choose the default image from the images folder within your Workspace folder. 7. Save. Copyright 2015 Sizmek. All rights reserved. 12

14 Notice The information contained in this document is proprietary and confidential to Sizmek and/or any of its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its authorized representatives is strictly prohibited. The information furnished in this document is believed to be accurate and reliable. However no responsibility is assumed by Sizmek for the use of this information. Sizmek reserves the right to make changes to the information included in this document at any time and without notice. Copyright 2015 Sizmek. All rights reserved. Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries. Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other trademarks are the property of their respective owners.