driving commerce through streaming video

1 Driving E-Commerce with Video • May 13, 2014

DRIVING COMMERCE WITH VIDEO May 13, 2014

Charles Hudson [email protected]


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


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


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


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


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


<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


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>!


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.


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


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>


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


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

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">  </object> <source src="http://www.totalec…=e124798" type="video/mp4"> </video> </div>


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


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


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


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>


•  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.


•  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 } }); }


•  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


EXAMPLE – IFRAME PLAYER Load and control the YouTube Iframe player.


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.


•  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.


EXAMPLE – CUEING VIDEOS Using the YouTube Iframe API loading the player based on user’s thumbnail selections.


•  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, …


•  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(); });


ANALYTICS INSIGHT & ANALYSIS


•  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


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


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


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


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.


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


QR CODE ON SITE LAUNCHING

•  Make sure the code can be scanned.

Image credit – mobile marketer Image credit – Tag It Up, LLC

OTHER FAILS


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


CONCLUSION RECOMMENDATIONS & THOUGHTS


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


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


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


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


•  Test on a variety of viewing platforms.

•  Plan on an omni channel strategy.

•  Understand location and usage paradigms.


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


Q&A [email protected]

linkedin.com/in/chuckhudson

Code samples https://github.com/cahudson/vcommerce


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


IF YOU LIKE THIS TALK

•  Check out –  Making the HTML5 VIDEO tag interactive

•  http://www.slideshare.net/charlesahudson/html5-video-interactive-28467810


CHARLES HUDSON

•  Google+ https://plus.google.com/u/0/+CharlesHudsonA

•  http://www.slideshare.net/charlesahudson/

linkedin.com/in/chuckhudson

driving commerce through streaming video

Technology