Escolar Documentos
Profissional Documentos
Cultura Documentos
Google proprietary and confidential. The features described in this document are subject to change.
1 of 12
YouTube Mosaic
Revised: January 6, 2010 Overview About this document Designing your Video Mosaic Target image guidelines Customizing the colors of the Video Mosaic Selecting videos for your mosaic Optional features Search Voting Tracking user activity with Google Analytics Accessing Analytics reports
Overview
The YouTube Video Mosaic is a Flash-based gadget that is available for display on qualifying brand channel pages. The Video Mosaic provides a novel way to associate your brand or product with a collection of YouTube videos. The Video Mosaic uses the thumbnail images for a collection of videos to create a mosaic. As shown below, each mosaic tile shows a still-frame from a video, and tiles are arranged to form a larger image, such as a logo, a still from a movie, or a photograph of a character or product. The code that constructs the mosaic matches the colors of video thumbnails to the colors of pixels in the larger target image. The code also matches shapes in the thumbnail images to similar shapes in the target image.
Google proprietary and confidential. The features described in this document are subject to change.
2 of 12
Users can scroll over any thumbnail in the mosaic to see the title, rating and length of the associated video as shown below:
Google proprietary and confidential. The features described in this document are subject to change.
3 of 12
Users can also click on a thumbnail to watch the video in a 480x360 player that displays in the center of the module. Once the video player is open, the user can use the player controls or can scroll to watch other videos. After a video has finished playing (or if the user clicks the share button in the video player), a sharing overlay displays links to popular social networking sites as well as the URL for the video on YouTube.
This document contains the following sections: The Designing your Video Mosaic section provides recommended guidelines for the target image of your mosaic and also explains options for customizing other colors in the Video Mosaic. Your Technical Producer will actually create your mosaic, but you will provide the target image and color codes for the gadget to your Technical Producer. The Selecting videos for your mosaic section explains options for selecting the videos that will display in your Video Mosaic. The Optional features section explains the search and voting functionality that you can opt to enable for your mosaic. The Tracking user activity with Google Analytics section explains how to set up a Google Analytics account and enable Analytics event tracking for your Video Mosaic module.
Google proprietary and confidential. The features described in this document are subject to change.
4 of 12
The following guidelines explain how to select the target image, from which the Video Mosaic is formed, for your channel page: Use a high-resolution image, not a low-resolution image that has been scaled up. Your target image should have tight composition and high contrast. The image must be 840 pixels wide and 441 pixels high. The image can be in .jpg, .png, or .gif format.
Send your target image to your Technical Producer, who will add it to your gadget.
Customizing the colors of the Video Mosaic
You can customize a number of colors used in the module. The table below identifies and describes each of the customizable color settings. After selecting your colors, please send the hexadecimal codes for those colors to your Technical Producer, who will set them for your Video Mosaic module.
Google proprietary and confidential. The features described in this document are subject to change.
5 of 12
Url parameter
Default UI Element
Description
The default color of UI elements before a user interacts with them. This color appears in the video player view on the buttons for scrolling between videos as well as the play button, video progress bar, volume button, sharing button and close button. The hover color for UI elements. This color displays when a user scrolls over the element without clicking it. Until the user scrolls over the element, the Default UI Element color displays. If the user clicks the element, then the Active UI Element color displays. The color of UI elements when in their down state. The active color is only visible while the button is being clicked i.e. the mouse is hovering over the button and the mouse button is being clicked. The color of icons that appear in module buttons. The buttons are the same as those listed for the Default UI Element color setting. Detail icons include the carats ("") inside the scrolling button, the X inside the button for closing the video player, the arrow inside the play button, the speaker inside the volume button, and so forth. The color of the Video Mosaic's background panel, which displays around the video player. In the thumbnail grid view, this color is used for video titles, which display in the panel that displays video information while the user's mouse hovers over a thumbnail image. In the video player, this color is also used to display the video title, elapsed time, and video duration, which display next to the video progress bar. When a user scrolls over a thumbnail image in the mosaic, this color is used to display the duration of that video. The duration is shown in the small panel that displays video information while the user's mouse hovers over the thumbnail. The color used to display the star rating of a video. The rating is shown in the small panel that displays video information while the user's mouse hovers over the thumbnail. The rating also displays in the video player. The background color of the stars used to show the star rating. For example, if a video is rated 3 out of 5 stars, then three stars will be shown in the Star Rating color, and two stars will be shown in the Star Background color. The color of the thumbs-up rating button, which displays if you are using videos from a contest and have enabled voting in the Video Mosaic. The color of the thumbs-down rating button, which displays if you are using videos from a contest and have enabled voting in the Video Mosaic. The color of links to share a video on popular networking sites. These links display in the video player window after the end of the video.
Highlight UI Element
Active UI Element
UI Element Details
Background Panel
Text Setting 1
Text Setting 2
Star Rating
Star Background
The image below shows many of the customizable color settings in the Video Mosaic.
Google proprietary and confidential. The features described in this document are subject to change.
6 of 12
Google proprietary and confidential. The features described in this document are subject to change.
7 of 12
Optional features
You can choose whether to enable the following optional features for your Video Mosaic. Please contact your Technical Producer if you would like to use any of them: Search Voting
Search
If your Video Mosaic uses the approved submissions for a contest as its video collection, you can opt to display a search box in the top-right corner of the module. When a user enters a query in the search field, YouTube will match the query to the titles, descriptions, tags and other metadata for the videos in the video collection, and the module will then display any matching videos. You can also customize the text that displays, by default, in the search box as well as the message that displays if the user's search query does not match any videos in the collection. The user can return to the complete video collection in the mosaic by clicking the close (X) button next to the search box.
Voting
If your mosaic uses the approved submissions for a contest as its video collection, you can enable voting in the module's video player. A user can rate each video with a positive (thumbs-up) or negative (thumbs-down) rating, and the votes will be recorded in the contest administration tool. The first image below shows how the voting buttons display in the mosaic's player. The buttons use the Default UI Element and UI Element Details colors before the user has voted. The second image shows how the voting button appears after a vote has been submitted, in this case using the Positive Rating Button color for the button's background.
Google proprietary and confidential. The features described in this document are subject to change.
8 of 12
Google proprietary and confidential. The features described in this document are subject to change.
9 of 12
your Video Mosaic module. Follow the instructions for adding a profile to complete this step and then skip step 4. 3. If you do not already have a Google Analytics account for tracking interactions with your brand on YouTube, follow these steps to create a new account: i. Click the Sign Up button. Your Analytics account identifies a website where you will track information and is different from the account that you use to log in to Analytics. (Your login can actually be associated with multiple Analytics accounts.) ii. Fill in the required fields for your account. We recommend that you enter the YouTube brand channel URL for your contest as the website URL for the Analytics account. After you complete the set-up process, Analytics will display code that includes a profile ID in the format UA-######-#. 4. Email your profile ID to your Technical Producer for inclusion in your Video Mosaic. Google Analytics will begin tracking user interactions once this profile ID has been added.
Accessing Analytics reports
The following steps explain how to access Analytics reports once your Video Mosaic is live and you have created your Google Analytics profile for tracking interactions with the Video Mosaic: 1. Log into Google Analytics at http://www.google.com/analytics. 2. Click the name of the Google Analytics account that you are using to track user actions in the Video Mosaic module. 3. Click the View Report link next to the appropriate Google Analytics profile.
4. On the left dashboard, click the Content link. 5. Click the view full report link that appears at the bottom of the center column of the page.
Google proprietary and confidential. The features described in this document are subject to change.
10 of 12
6. On the top right, select the date range for which you would like to view data. You can see data as of the time that Google Analytics was implemented for your Video Mosaic.
7. Google Analytics displays different user interactions with the Video Mosaic module as pages. Each page lists a pageview count and a unique pageview count. Unique pageviews are only counted once per session, so the pageview count identifies the number of times that an interaction actually occurred. You can also adjust the number of rows displayed on the report page using the drop-down menu below the statistics table.
Google proprietary and confidential. The features described in this document are subject to change.
11 of 12
8. You can sort the data in the report using a number of different metrics, and you can also export or email the data.
The report lists the following page types: /video_view/videoID A user navigates to watch a video, either by clicking a thumbnail in the Video Mosaic or by scrolling in the video player. /scroll_video_left/ A user clicks a button in the video player to navigate to the previous video in the Video Mosaic. /scroll_video_right/ A user clicks a button in the video player to navigate to the next video in the Video Mosaic. /thumbs_up/ A user gives a positive (thumbs-up) vote to a video. /thumbs_down/ A user gives a negative (thumbs-down) vote to a video. /share_button_click A user clicks the "share" button in the video player controls. /share_SocialNetwork/ A user clicks a link to share a video via a social network. The name of the network is appended to the URL. /link_field_click/ A user clicks a link to navigate to a video's watch page on YouTube. Google Inc. 2010. All Rights Reserved.
Google proprietary and confidential. The features described in this document are subject to change.
12 of 12