Upload
charles-hudson
View
864
Download
2
Embed Size (px)
DESCRIPTION
Streaming Media East 2014 - May 13, 2014 New York City, NY streamingmedia.com D104: How To: Driving Commerce Through Streaming Video The use of streaming video containing rich product information is becoming more and more commonplace for online commerce. This session will explore best practices, examples, concepts, and future possibilities for how streaming video can drive e-commerce. Areas of examination will include content creation, interactions, purchase conversion, video commerce platforms, social sharing, and video analytics. In addition, the session will look into the convergence of streaming video with mobile commerce, social commerce, and location-based commerce.
Citation preview
1 Driving E-Commerce with Video • May 13, 2014
DRIVING COMMERCE WITH VIDEO May 13, 2014
Charles Hudson [email protected]
2 Driving E-Commerce with Video • May 13, 2014
STATS VIDEO IN COMMERCE
YOUTUBE APIs IFRAME PLAYER EMBEDDING
AND CONTROL
MOBILE MERGING THE PHYSICAL AND
VIRTUAL / SHOPPING ANYWHERE
<VIDEO> REFRESH ON VIDEO IN HTML5
ANALYTICS HOME GROWN & YOUTUBE
CONCLUSION RECOMMENDATIONS AND THOUGHTS
3 Driving E-Commerce with Video • May 13, 2014
POWER OF VIDEO
• 1,014 U.S. adults from December 26 to December 30, 2013
• 73% of U.S. adults are more likely to purchase a product or service after watching a related video.
• 79% said it was helpful to watch a video before making a purchase
• 68% found it helpful to watch a video more than once before making a purchase
• 77% think brands who create online videos are more engaged with their customers
• 73% think brands who create online videos are also more likely to gain repeat customers
• 71% feel that they’re left with a positive impression after watching a brand’s video
• 65% who watched brand videos viewed the company as an expert, and 58 percent believe brands who create their own videos are more trustworthy.
• 96% of consumers find videos helpful when making purchase decisions online
Reference – Animoto.com - March 13, 2014 - http://animoto.com/blog/business/small-business-video-infographic/
BY THE NUMBERS – RECENT ANIMOTO SURVEY
4 Driving E-Commerce with Video • May 13, 2014
PRODUCT VIDEO
• Traditional Video Types – Brand Awareness (yours or manufacturers)
– Inline Product Features
– Instructional / How To
– Testimonial / Experience
PUT OUT BY YOUR MARKETING TEAM
Internet Retailer reports that shoppers who viewed video on Stacks and Stacks product pages were 144% more likely to add to cart than other shoppers. - http://www.internetretailer.com/2011/03/07/product-videos-raise-purchase-likelihood-stacks-and-stacks
5 Driving E-Commerce with Video • May 13, 2014
PRODUCT VIDEO CLASSIFICATION
• In terms of product videos we have seen an explosion.
• Multiple categories stemming from categories used years ago.
Unboxing Empties How To’s & Tutorials
Torture Tests Tours Vs. / Versus
Haul Giveaways TAGs
Pickup Favorites Parodies
• These are the types of videos influencing customers.
• http://www.reelseo.com/12-types-product-videos/
CATEGORIES INFLUENCING CUSTOMERS
6 Driving E-Commerce with Video • May 13, 2014
HIGHLY INFORMATIVE
• Provides methods for better association of customers with vendors.
» https://www.youtube.com/watch?v=L2RjEcAodjw
• Also provides an easy method for customers to review. Product Fail Videos!
CAN WORK BOTH WAYS
7 Driving E-Commerce with Video • May 13, 2014
<VIDEO> TAG EMBEDDED WITH HTML AND JS
“Online retailer Bizchair.com told STORES Magazine that video viewing had a powerful impact on sales, citing data showing that 33% of online sales came from the 13% of site visitors who viewed video.” STORES MAGAZINE, JULY 2012
8 Driving E-Commerce with Video • May 13, 2014
HTML5 <VIDEO> ELEMENT
• Added in HTML5 to mainstream media video playback with out plugins.
• Built in controls available.
• Multiple sources to provide various browser support.
• Fallback messaging allowed for unsupported browsers.
• Still varied support in breadth and depth across browsers.
REFRESH
<video controls>! <source src="/video/big_buck_bunny_480p_surround.avi" type='video/mp4’>! <source src="/video/big_buck_bunny_480p_stereo.ogg" type='video/ogg’>! <p>HTML5 Video is not supported by this browser.</p>!</video>!
9 Driving E-Commerce with Video • May 13, 2014
VIDEO API EVENTS & PROPERTIES
• Key events
• Properties Include – currentTime – read/write of the playing pointer on the video media.
SMALL BUT KEY SUBSET
play Video is played.
pause Video playback is paused.
ended Video playback has ended.
timeupdate Video currentTime is updated.
10 Driving E-Commerce with Video • May 13, 2014
Get currentTime Returns the current pointer time
TIMELINE METHOD / EVENTS A SAMPLE FLOW
00:00:00:000
pause() Pause event fired
autoplay Play event fired
Ended event fired
• Methods and current time fired automatically or manually.
Set currentTime Moves the play pointer
play() Play event fired
11 Driving E-Commerce with Video • May 13, 2014
OVERLAYING HTML ELEMENTS
• Leverage CSS position to place elements.
• Canvas an option as well.
• Provides for interactions – While video loading.
– During playback or timeline navigation.
– When play ends.
• Can overlay entire video element or partial.
BASIC ELEMENTS
<video>
<div>
12 Driving E-Commerce with Video • May 13, 2014
EXAMPLE – 360 DEGREE VIEW Overloading the VIDEO tag with a slider to control video currentTime position and overlaying a canvas viewpoint.
Video Credit - http://vimeo.com/29384844 IMAGIN WORKSHOP Website: imagin.hk
13 Driving E-Commerce with Video • May 13, 2014
VIDEO OVERLAY USES
• Inline Purchasing – Place Add to Cart or Buy Now buttons inline with specific product.
• Social Sharing and Returns – Place social sharing buttons overlaid at end of video.
• Pop Bubbles – Draw attention to specific products or information in an experience.
• For more information see HTML5 Video presentation from Streaming Media West 2013 online.
SOME WAYS TO ENHANCE FOR COMMERCE
14 Driving E-Commerce with Video • May 13, 2014
VIDEO ELEMENT SUPPORT
• Sample using flash as first but don’t need to include flash.
FALL THROUGH
<div> <video width="642" height="361" src="http://www.totalec…?eclipid=e124798"> <object width="642" height="361" type="application/x-shockwave-flash" data="http:// misc.bbyst…mediael7578a9ee9e158.swf"> <param name="movie" value="http://misc.bbyst…7578a9ee9e158.swf"> <param name="flashvars" value="controls=true"> <!-- Image fall back for non-HTML5 browser with JS turned off and no Flash player installed - Add image tag here--> </object> <source src="http://www.totalec…=e124798" type="video/mp4"> </video> </div>
15 Driving E-Commerce with Video • May 13, 2014
VIDEO TAG FALL THROUGH
1. In Chrome – go to chrome://plugins
2. Disable Adobe Flash Player
This does not require a restart of chrome.
3. Verify flash player is disabled – go to
http://helpx.adobe.com/flash-player.html
HOW TO VALIDATE – FOR THE ABOVE CODE
16 Driving E-Commerce with Video • May 13, 2014
3RD PARTY INTEGRATION
• Shopping Cart Incorporation – Typically support inline video with extensions from 3rd party developers.
– Inline, thumbnails, pop ups, galleries, YouTube player control, etc.
– For example Magento has several extensions available including pulling in video from social sites.
SHOPPING CARTS HAVE BEEN TENTATIVE
17 Driving E-Commerce with Video • May 13, 2014
YOUTUBE APIS AVAILABLE APIS & USAGE
“YouTube videos have influenced a purchase at least once for 53 percent of consumers.” Walker Sands’ 2014 Future of Retail Study
18 Driving E-Commerce with Video • May 13, 2014
SIMPLE EMBEDDING
1. Take the YouTube video id from the query string. In this case 6A99O-mCZSM
2. Add onto embedded URL for YouTube.
//www.youtube.com/embed/6A99O-mCZXM
3. Place in iframe
EASY SHARING AND RETURN REFERENCE
<iframe width="600" height="338" src=”http://www.youtube.com/embed/6A99O-mCZSM" frameborder="0" allowfullscreen> </iframe>
19 Driving E-Commerce with Video • May 13, 2014
• Documentation at https://developers.google.com/youtube
• APIs Available
YOUTUBE LIBRARIES EXTENSIBLE SET FOR DEVELOPERS
Analytics For retrieving metrics on your channels or videos.
Data Working with videos and playlists in your app.
Live Streaming For creating, updating, and managing live events on YouTube.
Player Includes Android, Iframe, JavaScript, and Flash Player APIs.
20 Driving E-Commerce with Video • May 13, 2014
• Player loaded into element id passed in as first variable.
• Provide: – Size
– Video id to load
– Events to register for
• Optional playerVars provides customization of player
YOUTUBE IFRAME API PLAYER IFRAME INSERTION
var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: ’<youtube video id>', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }
21 Driving E-Commerce with Video • May 13, 2014
• A sampling: – Load and play a specific video
loadVideoById( videoId, start seconds, suggested quality )
– Control a video
playVideo()
pauseVideo()
stopVideo()
seekTo( seconds, allow seek ahead)
clearVideo()
• Others include volume, playlist, and playback rate control.
YOUTUBE IFRAME API IFRAME PLAYER FUNCTIONS
22 Driving E-Commerce with Video • May 13, 2014
EXAMPLE – IFRAME PLAYER Load and control the YouTube Iframe player.
23 Driving E-Commerce with Video • May 13, 2014
MOBILE AUTO PLAY Note that the auto play functionality is prevented from running by mobile platforms to be friendly to users and their cell plan data usage.
24 Driving E-Commerce with Video • May 13, 2014
• Events – onReady – player is ready.
– onStateChange – play state has changed.
– onPlaybackQualityChange – quality has changed.
– onPlaybackRateChange – play rate has changed.
– onError – player error has occurred.
– onApiChange
• Event object passed with events with potentially a “target” and a “data” element.
YOUTUBE IFRAME API PLAYER EVENTS
Note that the target usage may create a cross domain error. The player reference may be used instead.
25 Driving E-Commerce with Video • May 13, 2014
EXAMPLE – CUEING VIDEOS Using the YouTube Iframe API loading the player based on user’s thumbnail selections.
26 Driving E-Commerce with Video • May 13, 2014
• Leverage YouTube Data API version 3.
• Thumbnails object available on the video resource.
• “key” is either default, medium, high.
• See https://developers.google.com/youtube/v3/docs/videos
EXAMPLE EXTENSION CAN PULL THUMBNAILS DYNAMICALLY
{ "kind": "youtube#video", "etag": etag, "id": string, "snippet": { "publishedAt": datetime, "channelId": string, "title": string, "description": string, "thumbnails": { (key): { "url": string, "width": unsigned integer, "height": unsigned integer } }, "channelTitle": string, …
27 Driving E-Commerce with Video • May 13, 2014
• MediaElement.js - http://www.mediaelementjs.com/
• Wraps the APIs to act like the HTML5 video element.
WRAPPERS FOR 3RD PARTIES FOR YOUTUBE AND VIMEO
HTML - <video id="youtube1" width="640" height="360"> <source src="http://www.youtube.com/watch?v=nOEw9iiopwI" type="video/youtube" > </video>
Javascript - jQuery(document).ready(function($) { $('#youtube1').mediaelementplayer(); });
28 Driving E-Commerce with Video • May 13, 2014
ANALYTICS INSIGHT & ANALYSIS
29 Driving E-Commerce with Video • May 13, 2014
• Some Metrics of Interest – CVR – conversion rates
– Play rate per product
– Views total and views per user
– Number of times played per user
– Number of completion plays
– Distribution of play lengths
– Estimated minutes watched
– Average view duration
• Click through rates on overlay buttons
• Able to leverage the HTML5 video and YouTube functions such as player status and current time.
ANALYTICS MEASURING RETURN
Sample YouTube Analytics
30 Driving E-Commerce with Video • May 13, 2014
YOUTUBE ANALYTICS
• The whole picture if YouTube hosted.
• 20+ metrics available including; – View Metrics – views, uniques
– Watch Time Metrics - estimatedMinutesWatched
– Engagement Metrics
– Annotations Metrics
– Earning Metrics
– Ad Performance Metrics
• Requires registration of your application and Oauth authentication.
• https://developers.google.com/youtube/analytics/
YOUTUBE ANALYTICS API
31 Driving E-Commerce with Video • May 13, 2014
MOBILE INTEGRATION & INTERACTION
“Online media influences more than 50% of in-store sales, making cross-channel campaigns for the omnichannel shopper more critical than ever. Than number is expected to rise to 60% by 2017. “ MediaPost – Web Media Influences Half of Store Sales
32 Driving E-Commerce with Video • May 13, 2014
MOBILE PRODUCT VIDEO USAGE
• Mobile leveraged for: – Casual Browsing / Product Research
– In store research using a mobile device
• Two types internet supported research in store: – Unguided / Self-guided
• Keyword Searching
– Directed from product packaging / signage
• Vendor website
• Specific product information launch point
33 Driving E-Commerce with Video • May 13, 2014
MERGING OF PHYSICAL AND VIRTUAL
• More and more people using mobile seamlessly in physical locations.
• From CMB - 41% say the information they got was useful.
• Launched from product packaging or signage.
• Less about the technology and more of how to get the information to the user in the decision window.
34 Driving E-Commerce with Video • May 13, 2014
EQUIVALENCY ACROSS PLATFORMS
• BestBuy uses shelf tags with QR Codes for the online product experience.
• However – 3 Videos available on desktop while no video is available on the iPhone for Destiny.
BESTBUY DIFFERENCE ON IPHONE
35 Driving E-Commerce with Video • May 13, 2014
QR CODE ON SITE LAUNCHING
• Make sure the code can be scanned.
Image credit – mobile marketer Image credit – Tag It Up, LLC
OTHER FAILS
36 Driving E-Commerce with Video • May 13, 2014
PUSH VIDEO
• Whether in-store or online.
• Make it easy to find and view.
• Can we get to one click or tap information?
BRING VIDEO CONTENT TO THE FRONT
37 Driving E-Commerce with Video • May 13, 2014
CONCLUSION RECOMMENDATIONS & THOUGHTS
38 Driving E-Commerce with Video • May 13, 2014
PRODUCT VIDEO TOOLS
• Quickly growing area of commerce services – Animoto – online video creation service
– Treepodia – www.treepodia.com - ecommerce video platform
– Invodo – invodo.com
• Provide various features: – Creation
– Analytics
– Distribution
– Social sharing
– Video advertising (banners and like)
SIMPLIFYING THE PROCESS
39 Driving E-Commerce with Video • May 13, 2014
RECOMMENDATIONS
• Use video links on product pages, not just brand pages.
• Keep videos short – 1-2 minutes (small opportunity window).
• Stay away from photo montages videos.
• If unable to create own videos link to manufacturers video.
• Keep content up to date.
SOME GATHERED EXPERIENCES
40 Driving E-Commerce with Video • May 13, 2014
RECOMMENDATIONS
• Put video above the fold either linked or embedded.
• Use a combination of video types.
• Use A/B testing for length, subject material, style.
• Test on a variety of viewing platforms.
• Verify ROI with analytics. A combination of in-house and third party.
TESTING AND METRICS
41 Driving E-Commerce with Video • May 13, 2014
From ONLINEVIDEO.NET, 2013
-17% of consumers have discovered a product through Pinterest.
- Consumers also use social media to discover the latest news and products from brands (65 percent of consumers), receive customer support (24 percent), and to see what others are buying (19 percent).
- Mobile shoppers are 3x as likely to view a video than desktop shoppers.
Increasingly seamless experience with mobile/social and product videos will be key.
Not only is it now easy to view videos anywhere but it is also easy for customers to create and share.
FOCUS MOBILE & SOCIAL
42 Driving E-Commerce with Video • May 13, 2014
• Test on a variety of viewing platforms.
• Plan on an omni channel strategy.
• Understand location and usage paradigms.
43 Driving E-Commerce with Video • May 13, 2014
FUTURES
• Continued “experimentation” of augmented reality interactive product packaging – without 2D codes.
• Increased virtual physical experiences.
• Wearable interaction and video triggering based on location – beacons, geofencing, NFC, etc.
• More contextual click through video elements.
• Video customer reviews posting in real time right to product pages.
• Increased business costs of video safeguards.
WHAT MAY BE
44 Driving E-Commerce with Video • May 13, 2014
linkedin.com/in/chuckhudson
Code samples https://github.com/cahudson/vcommerce
45 Driving E-Commerce with Video • May 13, 2014
REFERENCES
• Animoto – The Power of Video for Small Business Infographic, March 13, 2014.
• Invodo – Invodo Statistics
– Invodo Q1 2014 Video Commerce Benchmarks
• ReelSEO - http://www.reelseo.com/12-types-product-videos/
• Walker Sands Communications – Reinventing Retail: What Businesses Need To Know for 2014
• Making the VIDEO tag interactive - http://www.slideshare.net/charlesahudson/html5-video-interactive-28467810
SUGGESTED READING MATERIAL
46 Driving E-Commerce with Video • May 13, 2014
IF YOU LIKE THIS TALK
• Check out – Making the HTML5 VIDEO tag interactive
• http://www.slideshare.net/charlesahudson/html5-video-interactive-28467810
47 Driving E-Commerce with Video • May 13, 2014
CHARLES HUDSON
• Google+ https://plus.google.com/u/0/+CharlesHudsonA
• http://www.slideshare.net/charlesahudson/
linkedin.com/in/chuckhudson