Veeva CLM Content Creation Guidelines Version 13

August 2011
Veeva CLM Content Creation Guidelines

Contents
Chapter 1: Introduction .................................................................................................................. 3
How This Guide Is Organized ....................................................................................................... 3
Who Should Read This Guide ...................................................................................................... 3
Chapter 2: What is Veeva CLM? ..................................................................................................... 3
Chapter 3: Media Creation Guidelines ........................................................................................... 4
Media Display and Navigation ..................................................................................................... 4
Media File Formats and Guidelines ............................................................................................. 5
HTML5 Media .............................................................................................................................. 6
Veeva API functions for Interactive Media.................................................................................. 7
Display of Account information within HTML5 content .......................................................... 7
Support for Custom URLs ........................................................................................................ 8
Custom URL supported by iRep ............................................................................................... 8
Dynamic Presentations: “Jump to Slide” ................................................................................. 9
Chapter 4: Media Size Recommendations .................................................................................... 10
Chapter 5: Media Packaging Guidelines ........................................................................................ 11
Thumbnails and Full-Screen Images .......................................................................................... 11
Media Package .......................................................................................................................... 12
Chapter 6: Presentation Metadata................................................................................................ 14

Tables
Table 1: Guidelines and Sizes by Media Type.................................................................................. 5
Table 2: Calculating Download Time for Media ............................................................................ 10
Table 3: Typical Maximum Media Sizes and Quantities ................................................................ 10
Table 4: Required Thumbnail and Preview Image......................................................................... 11

2
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

Chapter 1: Introduction

HOW THIS GUIDE IS ORGANIZED

This book is organized into the following chapters:

 Chapter 2: What is Veeva CLM? This chapter explains what Veeva CLM is and how
it leverages the online and iPad application to deliver media.

 Chapter 3: Media Creation Guidelines: These guidelines help media creators design
and format their media for Veeva CLM.

 Chapter 4: Media Size Recommendations: These guidelines help brand managers

and media creators to balance media availability vs. system performance.

 Chapter 5: Media Packaging Guidelines: These guidelines help media creators or

data loading teams in packaging media to load into Veeva CLM.

WHO SHOULD READ THIS GUIDE

This guide is intended for media designers, data loading teams, and brand managers who are
responsible for selecting and creating media for Veeva CLM application.

Chapter 2: What is Veeva CLM?

Veeva CLM (Closed Loop Marketing) puts rich media into your sales team’s hands so they can
engage with physicians and key opinion leaders using the most compelling visuals available. The
application consists of two parts: an installed application on the iPad, and an online application
which controls the media available to a sales representative and accumulates playback statistics
so media can be continuously improved for maximum effectiveness.

Veeva CLM can be installed separately or as part of the iRep application. When included with
iRep, Veeva CLM integrates with the accounts and schedule of a user to make even more
detailed reporting possible.

3
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

Chapter 3: Media Creation Guidelines

Veeva CLM has been optimized for electronic detailing with HTML5 media and various other
digital assets. With HTML5, media can move and respond to physician or sales representative
interaction, providing the most engaging user experience. The media player also supports
images, video, and PDF to give access to existing media libraries.

MEDIA DISPLAY AND NAVIGATION

While Veeva CLM will support most media that is playable on the iPad, the following guidelines
will help obtain the highest quality media. In general, all media must be playable in Safari on the
iPad, as described in the TV and Video section of the iPad Specs page on the Apple website:
http://www.apple.com/ipad/specs . Once in Veeva CLM, the media is displayed according to
these guidelines:

 Media is displayed full-screen, with a resolution of 1024 x 768.

 Media is displayed in landscape mode only, rotating 180 degrees based on device
orientation.
 Users swipe left and right to advance to the next piece of media.
 Veeva CLM navigation controls (e.g. the built-in menu and buttons) are contained within
a semi-transparent, 100 pixel wide by 180 pixel tall area in the top left corner, which
should not contain logos or interactive areas, as they may be partially obscured in this or
future versions of the application.

4
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

MEDIA FILE FORMATS AND GUIDELINES

When creating media, it is important to consider both the quantity and image quality of the
media to ensure the application responds quickly and the user isn’t kept waiting for long periods
while media downloads.

Type Extension Max Display Additional Guidelines

Size
HTML5 .html 2MB  Displayed full  Can be multiple files, of type HTML, CSS,
.htm screen at 1024 x images, video and PDF and can be stored in
768 and in multiple folders
landscape view  Media included with the HTML should be
 Pinch-zoom can referenced using relative paths, like
be disabled “/css/styles.css” rather than
“http://server.com/css/styles.css”. Any
media not referenced in this way will not be
available when the rep is out of network
coverage
 Swiping left or right navigates to other
pieces of media, but dragging left, right, and
taps are allowed for in-page navigation
Video .mp4 10 MB  Displayed full  Videos must be playable in the iPad video
.m4v for 60 screen at 1024 x player (http://www.apple.com/ipad/specs/)
.mov seconds 768 and in  H.264 MPEG4 is recommended
.avi of video landscape view  Large files increase the battery use of the
 Small videos will device during syncing: using the highest
stretch to fill the level of video compression that creates the
screen desired effect is strongly recommended
 The TV and Video section of the iPad Specs
page on the Apple website provides more
detail: http://www.apple.com/ipad/specs
Images .jpg 0.25 MB  1024 x 768  2048 x 1536 resolution is recommended as
.png resolution it adds interactivity to content
minimum and in  Images of higher resolutions or insufficient
landscape view jpg compression can lead to very large file
 2048 x 1536 sizes (>0.5MB) and are not supported
resolution allows
pinch-zooming
.
PDF .pdf 2.5 MB  Displayed full  Multi-page PDFs are supported
for 10 screen at 1024 by  For presentations, using HTML5 or images is
pages of 768 and in recommended instead of PDF as those
images landscape view. formats can be presented more easily
 Stretched to fill  PDF resolution should be 150 dpi with
2.5 MB the screen width medium quality for image compression
for 50  Scroll vertically
pages of
text
Table 1: Guidelines and Sizes by Media Type

5
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

For HTML5 pages, if they are created without using transparent PNG files, the size can often be
reduced from 2 MB to 0.5 MB by using JPG instead of PNG. This also improves the load time of
the page, making the transitions between pages more attractive.

While it is possible to load much larger files into HTML5, if those files use up all the memory on
the device, the application may crash on displaying the content or soon after returning to the
rest of the application. During testing, it is important to test displaying and interacting with
HTML5 content repeatedly to ensure memory issues will not occur. Memory warnings may
appear in the log on the device to identify possible memory issues, although a warning may not
always appear and a warning may not always indicate an impending crash. XML parsing within
HTML5, while it may be technically possible, has been known to use up all the memory. iPad 2
devices provide slightly more memory, which may allow them to display slightly more complex
content, so it is important to test with an iPad 1 to ensure compatibility across versions.

For images, providing them at 2048 x 1536 will allow the sales representative to zoom in on
parts of the media, which adds a level of interactivity and appeal to the media. Even complex
images at this resolution can be compressed to about 250kb without visibly impacting quality.
1024x768 images should be less than 100kb each. If images are significantly larger than this,
changing the quality settings or using a different tool to create the jpgs can reduce their size.

PDFs are best used for long-format media, like reports and articles, as a representative wouldn’t
typically show every page from a PDF document. For shorter media and presentations, images
or HTML5 will provide better navigation experience and more accurate reporting.

With Microsoft Powerpoint 2007 or newer, entire presentation can easily be exported to
images. When viewing the presentation within Powerpoint, click the office button, then click
Save As. Select “Other Formats”, and from the “Save as type” dropdown, select jpeg (or png).
Powerpoint will display a pop-up asking whether to export the current slide or every slide in the
presentation. Once the selection is made, the image(s) will be created and ready for use.

HTML5 MEDIA
HTML5 provides a rich set of tools for creating interactive media. In general, anything that can
be done in flash can be replicated in HTML5. Some simple suggestions for adding interactivity to
otherwise static media include:

 Create a HTML button which links to an online resource, like a patient information site.
 Use motion to visually guide the viewer to key pieces of information, like efficacy
results, rather than animating background or secondary information.
 Provide interactions which meaningfully customize the message for a physician, like
filtering data by demographic or zip code.
 Add audio to a page, to allow narration of important aspects of content.
 For videos also available on YouTube, embed a local copy of that video and display it
within a frame (or open it full screen via a button), so it is always available regardless of
3G coverage. The URL to YouTube can be provided as a hyperlink.
 Link to (or embed using a frame) external systems, like a “send additional info” mini-
website or a “subscribe to mailing list” web-form.

6
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

Some considerations when creating HTML5 media:

 HTML5 speed: HTML5 pages in Veeva CLM will render at a speed faster than loading
them from a remote website and slower than just loading them from the browser’s
cache. Testing with the actual Veeva CLM is recommended.
 JavaScript speed: The JavaScript execution speed of Safari on the iPad is less than 10% of
the speed on a desktop computer. Complex animations that render smoothly on a
computer appear to stutter on the iPad. Using subtler or slower animations will reduce
the visibility of these performance limitations.
 Navigation: The application handles transitioning to the next piece of media via a swipe
to the left. Internal navigation should be limited such that a user doesn’t “lose their
place” when swiping left and right through media. Each “slide” should be created as a
separate piece of media.
 Zooming: This can be disabled using <meta name="viewport" content="width=device-
width,initial-scale=1,user-scalable=no" />1 as part of the HTML.

HTML5 media can be tested by loading it onto a website and viewing that website from iPad’s
Safari browser. Various HTML editor applications can give an even more accurate
representation of how content will be displayed. These tools are a good proxy for how it will
play back in Veeva, with the following caveats:

 Page loading times will be slightly faster than loading from a website, but significantly
slower than loading from the browser cache. If the initial page load creates any flashes
or wait time, smaller media files or different background colors are recommended.
 The top left corner of the page (60 x 176 pixels) is obscured by navigation controls, so
interactive media should not be placed there.
 Zooming is not available for HTML5 media.

VEEVA API FUNCTIONS FOR INTERACTIVE MEDIA

Veeva exposes a number of API functions that allow for display of interactive information,
streamlined navigation and launching of external iPad applications. The following sections
describes these functions and how to implement them as content is being developed.

Display of Account information within HTML5 content

The content displayed to your targets can include personalized information, such that the
content looks almost specifically tailored for each physician. By placing specific functions, listed
below, within your HTML5 content, the account specific information appears as part of the
content displayed.
To enable this feature, place this function within the HTML5 content:

veeva:getDataForObject(Account), fieldname(Name), getResult(result)

1
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebconte
nt/usingtheviewport/usingtheviewport.html

7
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

 “Account” refers to the physician that the media is being displayed to. No need to
modify this parameter
 “Name” is the API Name of the field that you wish to display
 getResult is a javascript function that content providers can implement to display the
resulting field. You can implement several of these functions to display different types of
fields, such as email and website fields.
 “Result” is the result object which is passed back to the content for display

For example, to display a link to the website of a physician, include the following in the content’s
javascript file:

veeva:getDataForObject(Account), fieldname(Website), getResult(result)

Then, within the javascript file for that piece of content, include your getResult function:
var getResult = function(result) {
divEle = document.getElementById("leftColumn-id");
divEle.innerHTML = divEle.innerHTML + "<br>site: <a href=\"" +
result.account.Website + "\">" + result.account.Website + "</a>";
}

The following field types are currently not supported:

 LongTextArea
 RichTextArea
 Lookup

Support for Custom URLs

The CLM Media Player supports custom URLs to specific applications. The links described below
can be included within HTML5 content. Tapping on the control containing the link will launch
the respective external application:

 mailto:// - Launches the Mail application

 maps:// - Launches the Maps application
 facetime:// - Launches FaceTime (for iPad2 only)
 http:// and https:// - Launches the Safari browser

Custom URL supported by iRep

Veeva supports two custom URLs that allow external iPad applications to launch iRep by calling
a specific URL. The custom URLs that iRep supports are:

1. veeva://
2. irep://

Calling either of these URLs will launch the iRep application. If the user was already signed in,
iRep will launch to the last screen the user was viewing. If the user was not signed in, the User
will be taken to the login screen.

8
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

Dynamic Presentations: “Jump to Slide”

Links to other slides within a presentation can be included within HTML5 content. To enable this
feature, place the following function within an HTML5 tag:

veeva:gotoSlide(Key Message External ID *)

*Media_File_Name_vod can be used, as it is an External ID of Key_Message_vod

When users click on the link or control that contains this underlying function, the media player
will “jump” to the slide defined in the function. Navigation from the slide that was reached by
the “Jump To” functionality will be identical to navigation had that slide been reached through
“traditional” navigation (i.e., swiping left will display the slide before that slide in the
presentation, not the slide from which the user “jumped”). Tracking of CLM Key Messages also
continues normally.

9
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

Chapter 4: Media Size Recommendations

There are two main concerns regarding the size of media: the download time and the display
speed. Table 1: Guidelines and Sizes by Media Type provides recommended sizes for media on
the device. Using higher resolutions or larger files sizes may be possible, but performance
decreases will often outweigh the improved clarity. Frequently smaller file sizes can be
obtained without any significant loss in clarity. It is always recommended to use the smallest file
size that delivers the message effectively.

While the iPad can hold 16 GB of files or more, downloading that over 3G (or even WiFi) would
take many hours.

The recommended maximum size of media for a rep is 200MB.

A typical download time is estimated in the tables below.

Data Value
File size 200 MB
Average download 1,000 kbs
Speed2
Estimated download 52 minutes
time
Table 2: Calculating Download Time for Media

Assuming a mix of media, this maximum size of 200 MB could consist of a mix of media, as
described in the table below.

Data Size / unit # of units Total Size

HTML5 50 pages (5 presentations 2MB 50 100 MB
of 10 slides each)
Video 4 videos (60 seconds each) 10 MB 4 40 MB

Images 40 images (4 presentations 0.25 MB 40 10 MB

of ten slides each)
PDF 20 brochures and reports 2.5 MB 25 50 MB

Total 200 MB
Table 3: Typical Maximum Media Sizes and Quantities

Since the system records detailed statistics about every piece of media shown, unused media
should be reviewed regularly and removed to ensure that sales representatives can quickly find
the current and most important media and maintain fast download performance.

2
While 3G speeds vary, this article, map, and database may be helpful in estimating local speeds:
http://www.wired.com/gadgetlab/2008/08/global-iphone-3/

10
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

Chapter 5: Media Packaging Guidelines

After creating a piece of media, some preparation of that media must be done before it can be
loaded into the system. Overall, the process involves creating lower resolution versions of the
media, putting all files into a folder, and compressing the folder into a zip file. Each piece of
media in the system will be encapsulated into a separate zip file before loading.

THUMBNAILS AND FULL-SCREEN IMAGES

As the sales representative is scanning through media, they are shown a full-screen preview
image rather than the full HTML, PDF, or video, so the system can switch more rapidly through
the media. When the preview image is tapped, the full page, PDF or video opens. When on a
call, a customer would never see the preview image, and would only see the full HTML, PDF or
video.

When the sales representative is viewing a list of media, small thumbnail images are shown.
These smaller images are also generated before loading into the system in order to maximize
the performance of the application.

To support these two features, each piece of media in the system (including an image file) needs
to be packaged with two images: one for the small thumbnail and one for the full screen
preview. Both of these images should be highly compressed JPGs to minimize download time.
Setting the JPG quality to 75% resulted in the sizes below for a piece of media named
Media1.jpg.

Type Name Resolution Typical Size

Original Media Media1.jpg 2048 x 1536 250 kb
Preview Image Media1-full.jpg 1024 x 768 70 kb
Thumbnail Media1-thumb.jpg 200 x 150 7 kb
Table 4: Required Thumbnail and Preview Image

To quickly generate preview images, a screen capture application3 may be helpful. Once
installed, one can set the computer’s screen resolution to 1024 x 768, view the media full
screen, and capture the preview images quickly.

To quickly generate thumbnails, an imaging editing application4 may be helpful. The “Batch
Conversion, Output Format, Advanced, Resize” function of some programs can make all the
required thumbnails in one go. Similarly, Adobe Photoshop™’s scripting capability can automate
this process.

When creating thumbnails, they should be visually distinguishable. If resizing the preview image
does not achieve this, manually creating a thumbnail which displays something unique about a
piece of media is recommended.

3
Wisdomsoft ScreenHunter is an example of this kind of application.
4
IrfanView is an example of this kind of application.

11
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

MEDIA PACKAGE
Each piece of media is loaded into the system as a zip file containing the media, thumbnails, and
supporting files.

Zip file requirements:

 Each piece of media must be packaged in a zip file.
 Each zip file name in the system must be unique.
 Uploading the same zip file name twice will overwrite the first one.
 The zip file name, excluding the “.zip” extension is the “name” of the media in the
system.

Media Structure:
 The files stored inside the zip file need to be contained in a folder with the same “name”
as the zip file. Please note that the file names are case sensitive.
 The file which should be opened when the rep selects a piece of media needs to have
the same name as the zip, except for the extension. E.g., inside media1.zip is a folder
media1 containing a file media1.jpg
 Multiple files with this name (but with different extensions) within a zip file are not
supported, as the system will not know which one to open.

Supporting Files:
 Additional files, like images and style sheets should be included inside the folder or
subfolders and referenced using relative paths.
 The thumbnail and full-screen preview are required for each piece of media.

A simple example, describing how to package Cholecap1.jpg:

1. Create a folder named Cholecap1
2. Place Cholecap1.jpg, Cholecap1-full.jpg, and Cholecap1-thumb.jpg in that folder.
3. Right-click on that folder and choose “Send to” and “Compressed (zipped) folder”.
4. The resulting zip file will be named Cholecap1.zip

An example of how to package a video file, called CholecapVideo.mp4:

1. Create a folder named CholecapVideo.
2. Prepare preview and thumbnail images for the media package – for example, capture a
screenshot of the first frame of the video, then resize the two images to conform to the
guidelines.
3. Place CholecapVideo.mp4, CholecapVideo -full.jpg, and CholecapVideo -thumb.jpg in
that folder.
4. Right-click on that folder and choose “Send to” and “Compressed (zipped) folder”.
5. The resulting zip file will be named CholecapVideo.zip

A more complex example, describing how to convert a two page PDF, Cholecap2.pdf, into
images and then into zip files:
1. Export the PDF to JPEG5
2. Rename those images to Cholecap2-page1.jpg and Cholecap2-page2.jpg

5
Acrobat Professional and PDF-XChange Viewer are programs which list this as a feature.

12
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

3. Create preview and thumbnail images for each page.

4. Create a folder named Cholecap2-page1 and a folder named Cholecap2-page2
5. Add the image, preview, and thumbnail to each folder.
6. Right-click on that folder and choose “Send to” and “Compressed (zipped) folder”.
7. The resulting zip files will be named Cholecap2-page1.zip and Cholecap2-page2.zip

An HTML5 file, called Cholecap3.html, with accompanying css style sheets, images and javascript
files, would require these steps:
1. Create a folder called Cholecap3
2. Place thumbnail and full images of the html file, called Cholecap3-full.jpg and
Cholecap3-thumb.jpg in the folder
3. Ensure that within the Cholecap3.html file, all references to supporting files are relative.
4. Place the Cholecap3.html file in the same folder as the thumbnail and full images.
5. Place the supporting folders (images, css, js, etc.) in the Cholecap3 folder.
6. Right-click on the Cholecap3 folder and choose “Send to” and “Compressed (zipped)
folder”.
7. The resulting zip file will be named Cholecap3.zip.

13
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

Chapter 6: Presentation Metadata

Within Veeva, content metadata is stored in three objects: Presentations, Presentation Slides,
and Key Messages. Each file that is uploaded into the system is attached to a key message,
which describes information about that file, such as the file name, file size, and the name that
should be displayed to a user when they view a thumbnail of that file. Presentations group
content together and give users a way to navigate to a given file. Finally, Presentation Slides are
“child objects” of presentations, which map key messages to a presentation and define a display
order.

The typical process for loading content into the system for testing is as follows:

1. From the online application, click the Key Messages tab, and then click on the “New”
(Key Message) button.
2. Enter in a file name, such as “test content” and specify a product, for example,
“Cholecap” and click save.
3. Click on the “Upload” button to select and upload a zip file into the system (note:
PDF/JPG files must be carefully packaged in a zip file, as described earlier in this
document).
a. If an error message is displayed after this step (similar to “the folder does not
exist”), then CLM is not enabled for this org. A case will need to be filed with
Veeva Customer Support. More details are available in the Media section of the
iRep Guide.
b. For a given Key Message, once a media file has been uploaded, you cannot
overwrite that file with another file of a different name.
4. Click on “New CLM Presentation Slide” and select a presentation, such as “All” or
“Cholecap” and choose a display order for the slide.
5. On the iPad, tap the “sync” button in the bottom left corner to pull down the newly
uploaded content to the device

If no media is available on the iPad, see the iRep Guide for instructions on configuring an org for
CLM. If other media is available, but the new content does not appear, the following steps may
be helpful in troubleshooting:

1. Online, find a presentation that the user can see on the device. Add your new key
message as a presentation slide within that presentation and see if that fixes the issue.
2. Online, view the newly created key message, and test that you can download the file by
clicking on the file name. If you cannot, upload the file again.
3. On the iPad, check the Options – Media list and confirm that the new key message is
listed as downloaded to the device. If it is not present, try hitting “Sync” again to ensure
the local data is up to date.
4. From the Media tab, verify that the presentation and slide is visible. If you do not see a
presentation here, it could be that it the presentation is missing a slide. Presentations
are only shown if the user has all the slides required to show that presentation.

14
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s
Veeva CLM Content Creation Guidelines

A few tips on metadata:

1. Media associated with Key Messages that are not marked “active” will not be displayed.
2. For media, the Display Order field on Key Messages is ignored.
3. You can delete a Key Message or mark it inactive to remove a piece of media. Once
users have saved calls with a piece of media you can only mark it as inactive as the
system uses that key message to properly display information about the call.
4. A media file can be in multiple presentations – this allows updating a piece of content
once, and have the changes reflected in multiple presentations.
5. Populating the Presentation ID field on each presentation is recommended, as it makes
the data much easier to move between testing and production.
6. If you forget to upload the media for a key message, but include it as a presentation
slide, the entire presentation will be hidden, to prevent accidental display of partial
presentations.

15
Veeva Systems Confidential Information
(For use only by licensed Customers of Veeva Systems)
s