PUBLISHING TO THE CHROME WEB STORE

PUBLISHING A .COM SITE AS A CHROME APP

AGENDA

PART 1 - BASIC CONCEPTS

PART 2 - FIRST-TIME ACCOUNT SETUP

PART 3 - PREPARING TO PUBLISH

PART 4 - PUBLISHING, UPGRADING, AND TRACKING

PART 5 - RESOURCES

!2

PART 1 - BASIC CONCEPTS

!3

1. IN A NUTSHELL

Chrome App = Zip file (Manifest + Icon) + Screenshots + Promotional Images + Detailed Description + Settings!

It can be as simple as a link to an existing website or web app!

Or, it can be as complex as a full-blown offline-capable, server-independent HTML5/CSS3/JS app!

Chrome Web Store Apps can be available to all, or restricted to your Google Apps domain, or to Trusted Testers only!

Note: Publishing an app is heavy on graphics/illustration skills

!4

2.A. ADVANTAGES - NAMING

Can disconnect your App Name from a .com Domain!

Users don’t load your .com site, they go to their Apps list!

Users can refer your app to friends by its App Name!

Your Chrome app shows up on Google search results

!5

2.B. ADVANTAGES - DISTRIBUTION

Benefits from increasing ChromeOS, Chrome browser users!

Increasing users with Google Apps or Google Accounts!

Because they Install your app in Chrome, they don’t have to memorize your URL!

Google takes care of tracking interest in your app!

Google can take care of the financial transaction (subscription)!

If Google likes your app, they can add it to a collection, or feature it close to the top (more impressions)

!6

2.C. ADVANTAGES - TECHNOLOGY

Helps increase your percentage of Chrome users!

Past a threshold you can evolve your code to use the latest and greatest in web technologies (HTML5, CSS, ...)!

Can take advantage in Notifications, which originally is in ChromeOS, but is making its way to Windows and Mac OS X

!7

3. KINDS OF CHROME APPS

Hosted Apps - Served from your web server!

Zip contains a Manifest + Icon!

“A Chrome App is just a Link”!

Packaged Apps - Self-contained, doesn’t need to hit any web server!

Zip contains Manifest + Icon + HTML5/CSS3/JS/other files!

Packaged Apps can reference content of its Zip file!

This presentation focuses on Hosted Apps!

!8

4. SUBSCRIPTION TIERS

Free, One-Time, Monthly, Yearly!

Can use your own custom payment, or Chrome Web Store Payments service (5% fee)!

US Pricing Tiers:!

$1.99, $2.99, $3.99, $4.99, $5.99, $6.99, $7.99, $8.99, $9.99, $14.99, $19.99, $24.99, $29.99, $34.99, $39.99, $44.99, $49.99, any value up to $1000!

https://developers.google.com/chrome/web-store/docs/pricing

!9

5. VISIBILITY OPTIONS

There are Four visibility options:!

1. All Chrome Web Store users!

2. Chrome users with [YourDomain] account or people with the link!

3. Chrome Web Store users with a [YourDomain] account!

4. Trusted Testers (Requires app to be Unpublished)

!10

6. PUBLISHING WORKFLOW

1. Setup Google Account used for publishing to the Chrome store!

2. Produce and Upload the Zip!

3. Produce and Upload Screenshots!

4. Produce and Upload Promotional tile images!

5. Detailed Description, Regions, Pricing, Visibility!

Tip: Give yourself at least half a day. The “Produce” parts of Steps 2, 3, and 4 take a long time

!11

PART 2 - FIRST-TIME ACCOUNT SETUP

!12

1. PICK A GOOGLE ACCOUNT

Decide on a Google Account to create the app with!

For a Hosted app, this account must go to Google WebMaster Tools and verify control of the domain:!

https://support.google.com/webmasters/answer/34592?hl=en!

You can transfer account ownership ($5 fee) !

https://support.google.com/chrome_webstore/contact/dev_account_transfer

!13

2. PAY THE ONE-TIME FEE

1. Go to the Chrome Developer Dashboard!

https://chrome.google.com/webstore/developer/dashboard!

2. If you need a Visibility option of All, you need to pay this one-time $5 fee to verify your account!

Chrome Developer Dashboard > Pay this fee now

!14

PART 3 - PREPARING TO PUBLISH

!15

1. FOLDER STRUCTURE

Since you will relase many versions over time, it’s a great idea to structure your folders well.!

To the right is a starting point that can handle multiple versions!

Folders are in green!

Substitute [string] with your app’s values

[Project Folder] Builds yyyymmdd [appname]dev [appname] manifest.json icon.png Screenshot1...Screenshot5.jpg Promotional920x680al440x280.jpg Promotional920x680.jpg Promotional1400x560.jpg [appname]prod [appname] manifest.json icon.png Screenshot1...Screenshot5.jpg Promotional440x280.jpg Promotional920x680.jpg Promotional1400x560.jpg yyyymmddhhmm-appname.zip

!16

2. PRODUCE THE REQUIRED FILES

For a Hosted app, you need to provide the following:!

1. A Zip file containing a manifest.json file, and an icon.png!

2. Five (5) Screenshots!

3. Three (3) Promotional images

!17

2.A. ZIP FILE STRUCTURE

The zip file contains a folder, which contains two files!

The manifest.json file defines the app (name, description, version, urls, permissions, etc)!

Zip the folder in Prod, and upload the zip in a later step!

Dev - see Slide 37

[Project Folder] Builds yyyymmdd [appname]dev [appname] manifest.json icon.png Screenshot1...Screenshot5.jpg Promotional920x680al440x280.jpg Promotional920x680.jpg Promotional1400x560.jpg [appname]prod [appname] manifest.json icon.png Screenshot1...Screenshot5.jpg Promotional440x280.jpg Promotional920x680.jpg Promotional1400x560.jpg yyyymmddhhmm-appname.zip

!18

MANIFEST.JSON FILE

The Manifest file defines your app!

Modify everything in green!

Increment your version and upload it to CWS when:!

A. manifest is updated!

B. hosted app changes!

We will now cover highlighted variables in detail

{ "name": "imgExpress", "short_name": "imgExpress", "description": "Photo processing tool", "version": "0.0.0.1", "manifest_version": 2, "app": { "urls": [ "http://www.imgExpressApp.com/" ], "launch": { "web_url": "http://www.imgExpressApp.com/", "container": "panel", "height": 650, "width": 1280 } }, "icons": { "128": "icon_128.png" }, "permissions": [ "unlimitedStorage", "notifications" ] }

!19

http://developer.chrome.com/extensions/manifest.html

VERSION NUMBERS

Versions must be > 0 and < 65535!

Versions follow the format: n down to n.n.n.nnnn!

Can be a “1” down to “0.0.0.1234”!

Must increment version when something in manifest.json file changes!

Version changes trigger autoupdate (see link for subtleties)!

http://developer.chrome.com/extensions/autoupdate.html

!20

URLS

These are the pages that will be granted permissions requested in the permissions section!

Must begin with http, https, or *!

Do not include port numbers!

Chrome uses Begins With matching (has an implicit * at the end)

!21

WEB_URL

This is the absolute URL that Chrome will load upon launch!

This is the landing page you want the user to end up when they run your Hosted app

!22

CONTAINER STYLESA container is where your app’s UI runs!

There are two options:!

1. tab (default)!

2. panel - new window without navigation, no omni bar

!23

PERMISSIONS

Available Permissions for Hosted apps:!

background - runs in the background after login and until user quits Chrome!

clipboardRead - required if you use document.execCommand(‘paste’)!

clipboardWrite - required if you use document.execCommand(‘copy’) or document.execCommand(‘cut’), especially Hosted apps.!

geolocation - allows app to use HTML5 Geolocation API without prompting!

notifications - Allows app to use HTML5 Notification API without calling checkPermission()!

unlimitedStorage - Bumps up your app’s storage limit from 5MB to Unlimited (for SQL DB and application cache)!

http://developer.chrome.com/extensions/declare_permissions.html

!24

MEDIA FILES

Most users will decide to Install your app based on either your Icon, Screenshots, or Promotional images!

When sizes are specified, you must upload at exactly those sizes!

Simple tools to make these:!

OS Built-in Print Screen - take screenshots!

Keynote or PowerPoint - Make promotional images!

GIMP - Make icons and crop/resize screenshots and promotional images!

Workflow: Screenshot > Keynote > GIMP > {PNG, JPG}!

https://developers.google.com/chrome/web-store/docs/images

!25

ICON

This is displayed in two situations:!

A. When the user goes to their installed apps!

B. When you don’t have any approved Promotional images!

Steps to create an Icon!

1. Create a baseline icon that’s 96x96 pixels!

2. Create another icon (PNG) that’s 128x128 pixels with Transparency, then paste the 96x96 in the center of this 128x128!

TIP: You can use GIMP to make this

!26

2.B. SCREENSHOTS

These are shown in a carousel when they look at your app’s details!

You need at least one, and can have up to five!

Must be 1280x800 (exact, cannot deviate)!

Could be 640x400, but better to produce higher-resolution!

Could show the entire screen or zoom in to some functions!

Tip: Your screenshots should tell a story

!27

SAMPLE SCREENSHOT

!28

2.C. PROMOTIONAL IMAGES

Represents your app in the app wall!

Three Promotional image sizes:!

1. 440x280 - small tile (required)!

2. 920x680 - large tile!

3. 1400x560 - Marquee!

On the Chrome Store’s app wall, the system picks one of these images to display your app to prospective users!

Tip: Submit promotional images in all three sizes

!29

PROMOTIONAL IMAGES

Google recommends the following:!

Avoid text.!

Make sure your image works even when shrunk to half size.!

Assume the image will be on a light gray background.!

Use saturated colors if possible; they tend to work well.!

Avoid using a lot of white and light gray.!

Fill the entire region.!

Make sure the edges are well defined.!

https://developers.google.com/chrome/web-store/docs/images#promo

!30

SAMPLE PROMOTIONAL IMAGES BY GOOGLE

1400x560

440x280

920x680

!31

PROMOTIONAL IMAGES ON CWS

!32

1400X560

920X680

440X280

3. SITE MODIFICATIONS

Make it easy for existing site users to convert to Chrome app users, put an icon/link in a good spot!

Steps:!

1. Go here for icons:!

https://developers.google.com/chrome/web-store/branding!

!

2. Then link the icon to your (future) Chrome app’s page from the Chrome Web Store

!33

EXAMPLES

Links to: https://chrome.google.com/webstore/detail/imgexpress/gdiiemjihjdlbgmpapglfmhjgddkacig

!34

4. CHANGES FOR PAID APPS

If you’re going to have some parts of your site be designated as a paid section of your Chrome app, you should lock it down in the most transparent way possible!

Typically use Google Account authentication

!35

5. DEV TESTING

Once you have all the files produced, you should test it out before publishing to the Chrome Web Store!

Follow these steps on your computer’s Chrome browser:!

1. From Chrome, go to this address chrome://extensions/!

2. Click the Developer mode checkbox on top!

3. Click the Load unpacked extension… button!

4. Select the folder containing your manifest and icon!

5. Go here: chrome://apps/ (or new Tab, click apps)!

6. Click on your app’s icon

!36

THE HARD PART IS OVER!!!

!37

PART 4 - PUBLISHING, UPGRADING, AND

TRACKING

!38

1. CREATE APP SKELETON

These are the steps to create the initial part of your app!

1. Go to the Chrome Developer Dashboard!

https://chrome.google.com/webstore/developer/dashboard!

2. Click the “Add new item” button!

3. Upload your Zip file

!39

2. ENTER DETAILED DESCRIPTION

The Detailed Description is a plain text field that holds up to 16,000 characters!

When a user looks at your app from the Chrome store, the Detailed Description appears in two places:!

1. Overview tab - to the right of the screenshot carousel!

2. Details tab - this is the main highlight!

Tip: Keep it interesting yet factual, and to the point.

!40

3. UPLOAD AN ICON

Upload the same icon PNG file contained in your zip

!41

4. UPLOAD SCREENSHOTS

Upload all the screenshots you made!

Tip: Upload them one at a time, in the proper sequence

!42

5. UPLOAD PROMOTIONAL IMAGES

Click “Upload new image” for each size, and upload the corresponding Promotional image!

Tip: Click “Preview my promotional tiles” to see how it looks so far

!43

6. LINK TO YOUR WEBSITE

From the drop-down, pick the domain that your app goes to!

If it’s not there, add it via Google WebMaster tools!

https://www.google.com/webmasters/tools/home?hl=en

!44

7. PICK A CATEGORY

Figure out what Category you want to place your app under!

Sorry, you cannot pick Popular!

!45

8. PICK YOUR PRICING

Click the Change pricing button

!46

9. PICK YOUR SALES REGIONS

Pick which country’s Chrome Web Store can see your app

!47

10. ENTER GOOGLE ANALYTICS

Enter your Google Analytics ID!

At the very least, you will see these on Google Analytics:!

1. those who go to your app’s details page!

2. Installs!

For Packaged Apps, you can hit the Analytics JS API!

http://developer.chrome.com/apps/analytics.html

!48

11. SET APP VISIBILITY

This sets Visibility from a Domain perspective!

Set to All to make it visible to anyone!

Set to Chrome Web Store users with a [domain] account to only make it visible to those in your Google Apps domain

!49

12. OTHER

Set the Language, OpenID, and Mature content fields as appropriate

!50

13. PREVIEW

When you’ve filled out all the appropriate fields, go through them one more time!

Click the Preview button at the bottom

!51

14. PUBLISH

If it looks good, click on the Publish link

!52

15. DONE

Your part is done!!!!

Now you wait. Google will review your Promotional images, and do some other processing.

!53

UPGRADING

You can change majority of values related to your Chrome app!

To change, simple modify the values or upload a new version of the file!

Increment your Version when:!

A. Modified your manifest.json file!

B. You made changes to your app on the server-side!

Changes take a few minutes before they go into effect

!54

TRACKING

Google tracks the following for you:!

1. Weekly Users - How many still have it installed for the week (Total Installs - Total Uninstalls)!

2. Impressions (Daily) - How many times did a user browse the Chrome Web Store and your app came into view that day!

https://groups.google.com/a/chromium.org/forum/#!msg/chromium-apps/WKLVaktnzxs/I1oi3D4NXRIJ!

3. Installations (Daily) - How many installed it that day!

4. Star Ratings and +1s on your app details page

!55

PART 5 - RESOURCES

1. RESOURCESThis presentation: http://goo.gl/7kO15T!

Important Links:!

https://chrome.google.com/webstore/developer/dashboard!

https://developers.google.com/chrome/web-store/docs/get_started_simple!

https://developers.google.com/chrome/apps/docs/developers_guide!

https://developers.google.com/chrome/web-store/docs/images!

http://developer.chrome.com/extensions/manifest.html!

http://developer.chrome.com/extensions/declare_permissions.html!

Next Evolution: Packaged Apps!

https://docs.google.com/presentation/d/1EmexDf1Z-gZ-2fG5tsjFdLjhv_AhLAwWNl0szDKMs2g/edit?pli=1#slide=id.p

!57

ABOUT THE IMGEXPRESS APP

Objective:!

Reduce Image File Sizes while maintaining good Image Quality!

Avg. 80% - 90% Reduction from camera-generated JPEG!

Operations:!

Resize, Auto-Enhance, Watermark, Compress!

Use Cases:!

Make sites load faster from smaller image payloads!

Reduce file size of documents/presentations containing screenshots or pictures!

https://chrome.google.com/webstore/detail/imgexpress/gdiiemjihjdlbgmpapglfmhjgddkacig

2. CONTACT

Gerard Cordero!

Email: gerard@OptimizedPrime.com!

G+: https://plus.google.com/+GerardCordero!

Twitter: @GerardCordero

!59