Preparing Assets for SAM Creation

A SAM (Source Activated Moment) is a collection of information and activations that make up an experience at any moment in the video. SAMs can be a simple piece of information to a more interactive experience where users can enter data, search, etc. Additional information or integration with an Ad Server can also be programmatically inserted based on keywords or similar criteria containing within the SAM.  At a high level, SAMs can in Information, and iframe, or E-commerce as outlined here:

Information SAM

The first part of the SAM is the thumbnail overlay and label field that appears in the video inviting the consumer to engage and explore.  

The thumbnail: Can be a PNG, JPEG, or GIF. Best to be kept between 300 x 300 to 500 x 500 in size per image instructions below. The GIF can also be an animated GIF with similar size recommendations. 

The text label: Will be scaled depending on the display resolution of the video frame on the device being used. It is best to target the smallest display such as a mobile phone. Lines will wrap depending on display size. On mobile, it will wrap at 10~18 characters depending on word structure. This example is from a desktop web browser.  

This is what the same video would look like on a mobile device:

The next section will break down the different sections of a basic Informational SAM and recommended sizing and asset type. A SAM contains:

• Text: Markdown is supported 
• Images: All images within a SAM will be scaled to fit based on their aspect ratio. An alpha channel (transparency) is supported with the PNG file type. Keep in mind that very large images may take time to load. Images 500 – 800 pixels wide at 72DPI and saved as “medium” when creating JPEGs work well.  
• Embeds and Links: (see Video & Map Embeds section below) 

Here's an example of what the different sections of a SAM might look like: 

• Logo is an image file.
• Tagline is a text field that will wrap depending on length of text. Ideally less than 32 characters. 
• Button + URL allows for external links to be referenced as a redirect function. Both the button and text color can be defined and are referenced in RGB, HEX, or HTML Color Names. The URL can be any URL destination link. Like the Tagline, keeping button text succinct is preferable. 
• Image area is as named: an image file. 
• Video/Embed is a link to another asset such as a YouTube video or Google map. See below for additional instructions. 
• Description is a text field supporting Markdown. 

Any of these fields are optional within a SAM and the order of the blocks can be rearranged. Not shown are other available blocks such as Location. Location inserts a Google map into the block based on an address.  

When dealing with logos or images that have transparency, the background of the SAM is black: rgb(0,0,0) with slight transparency. So be aware of logos with very dark colors in them as they may not be easily seen. In cases where the logo color must remain dark, choosing a JPEG with defined background color is a better option than a PNG with transparency. Regarding the proper aspect ratio of a logo image, the following example of a logo with transparency has a lot of space around it and when displayed will also retain the space even though it is transparent. It is advised to create the image assets with their desired aspect ratio and composition within that frame before using them. 

Untouched Arizona Central newspaper logo as an example. 

Original:  

After copping the file to desired aspect ratio reducing the amount of empty space: 

Example of a Completed SAM 

• Logo: PNG with Alpha 90 pixels high
• Tagline: Celebrating 90 Years
• Button: RGB value matches the museum’s brand color as seen in the logo. Clicking the button will take the viewer to the museum’s main website.
• Embed: is a Google map satellite view of the museum’s location.
• Image: Main entrance of the museum.
• Text: Description of the museum. 

A SAM can also include a video embed. In the field "Show Video", enter the video ID from YouTube or Vimeo or a URL Link:

• The video of a YouTube link is the value after the = sign and shown in bold:
  https://www.youtube.com/watch?v=dQw4w9WgXcQ
  
  
• The video ID for Vimeo is what appears after the last / in the URL and shown in bold :
  https://vimeo.com/148751763

A SAM Media Assets Asset Spec Sheet is available here.

iFrame SAM

An iFrame SAM is is a very straightforward process if the URL and page being referenced adhere to “responsive design” and the website allow itself to be iFramed. Provide the URL to be used as part of the SAM is all that is needed. iFraming a page allows for the full functionality of an existing web page to be available to the consumer within the video experience.

Responsive web design allows web pages to render well on a variety of devices and window or screen sizes from minimum to maximum display size.

Whether a web page adheres to responsive design or not is not clear, there are websites that allow for web page testing and how they will render on different devices; from mobile phones to tablets, to desktop. Using one of the smaller phone devices in portrait mode can approximate a SAM behavior as quick check but is not a substitute for a full QC check. For example, enter the URL to be iFramed here as one example of such as service:
http://www.responsinator.com/?url=

Another check to perform is a website or the pages allows themselves to iFramed. In some cases, partner sites will need to be whitelisted in order to be iFramed as part of the vide interactive experience. The same URL checker above can be a first step in identifying whether the site can be iFramed or not.  More information on what it takes to make a page or site render correctly in a SAM, please see this help article.

E-Commerce

A SAM can deliver products from a Shopify store if Shopify is the e-commerce vendor solution being used. A Shopify enabled SAM allows all the information about the product such as prices, availability, size, description, and image to appear. The consumer can purchase products as part of the video watching experience.

Embedding a Shopify store into a block is described here: