Implement Live! widget in Piwik Mobile

This requires the Live! API to be stabilized and maybe available via the Metadata API. This won't be done for a few releases as this is low priority, but definitely something we want to get done. Depends on fixing performance issues in #1966 as well.

mattab commented 13 years ago

(In [4349]) Refs piwik/piwik#1839 Simplyfying Live! plugin, removing unused code, cleaned up API, only 3 useful functions left with proper names (and more performant too),

adding tests, this one dedicated to Anthon ;)

Refs #1956 while Live! is not metadata compliant, I now consider the API stable (efficient + function names & parameters) and Piwik Mobile can start using it :) Let me know if you need any other api/ doc / info :)

NB: build will fail since it's pending another change in tracking API which I'll commit asap

tsteur commented 13 years ago

I've attached some different screens regarding UI. Any opinions? Further UI suggestions are very welcome.

My favourite is live3.png

sgiehl commented 13 years ago

Jepp, live3.png is my favourite, too.

mattab commented 13 years ago

Exciting stuff users will love it!! :)

Also think test3 is best, makes good use of UI space /pixels.

Some feedback on UI:

On Piwik Mobile, Live! and Visitor log could use same UI and code to make implementation easier.. in Piwik it uses 2 different templates, but I don't think necessary for piwik mobile?
Last 24 min -> last 30 min
I think it will be easier to read if the top looks like:

Last 24 hours | 4 visits, 34 pageviews
Last 30 minutes | 2 visits, 24 pageviews

Also it will save a row (only 2 rows instead of 3). Maybe font needs to be a bit smaller to make sure it fits in the width of screen without using 2 lines if for example 8374 visits, 30324 Pageviews (long numbers)

Icons on the left is a bit confusing, because it looks like icons are for the text on the right. I think easier to read if 3 icons are after the date (like in piwik UI)
it would be great to add, as well as Pageviews: 5, the number of Goal converted
also, when visit has converted an ecommerce Goal, or abandoned a Cart, could show the icon
- for this I will add XML entries in the output, with the path to the ecommerce icons (and/or Goal icon if normal goal converted) to make it easier
is it possible to see mockup for the screen when you click on "Details" for a visit?
- On details view, could show IP (if available in response - for admin/super user it will be)
- could show if returning visitor or not (will also add the path to icon in output)
- ideally would show Ecommerce orders as well: revenues (revenue/tax/shipping/etc) and products. See Example XML output for ecommerce cart/order with products

It's best if Piwik Mobile doesnt hardcode any URL of icons, so if there are some please let me know I'll add them to xml output.

mattab commented 13 years ago

(In [4773]) Refs #1956

Adding few icon paths in output (optional): visitorTypeIcon (set if returning visit), visitConvertedIcon (set if visit converted a standard non ecommerce goal),
Adding icon for each Action type (except for "normal" page view that don't have specific icons) Live & Visitor log now use these icons from API and dont use any hardcoded urls

mattab commented 13 years ago

(In [4779]) Adding translation "from" Refs #1956

tsteur commented 13 years ago

Hey Matt,

good ideas! thanks.

I'll use one template for "Visitor Log" and Live! (at least the same UI widgets)
~~Last 24min -> 30 min ~~ done
"Last 30 minutes | 2 visits, 24 pageviews" is indeed better readable. Just have to use a smaller font or use multiple lines (you mentioned it)... See attachment
I put the icons below the date. There is not enough space after the date. In a future release, I plan to display them after the date if orientation mode is landscape
Display of goals converted -> see Attachment
I created a mockup for the "Details" screen. I have really no idea what information is important and which is the best order. Also: The icons are currently not correct displayed on the left. It's just a mockup.

Is there a documentation about all possible actionDetail types like "ecommerceOrder?" and their properties?

I'm looking forward to get more feedback...

mattab commented 13 years ago

cool :)

Some ideas:

to fit the icons next to the date, maybe you can move the "Time on site" on the "Pageviews" line. for example

DATE - 3 ICONS
REFERRER
N PAGEVIEWS (5min 24s)}

I think it makes sense: line 1 = visitor, line 2 = referrer, line 3 = actions on site

Last 30 min 454 Visits/23 Pageviews does not fit in the screen, not sure what we can do?
In detail view:
- Type -> Visitor type
- Visit Converted -> boolean, so Yes/No instead of 1/0
- You can remove Currency from output
- can remove Continent
- if screentype == normal, do not display. If screentype != normal, display after resolution eg. Resolution 1280x900 (dual) - this saves one row
- Plugins: icons on the same line as the Plugin text (like "resolution", "OS", etc.) not a new section
List of actions suggestion (to make it more compact)
- when type != action, there will be an "icon" entry in the output (starting in 1.5) to be displayed
- when type == action, don't display "Type $type"
- when type != action, display "$PAGE_URL ($icon $type)" on same line
- Note that when type != action, there is no "Page Title" entry. Downloads / Outlinks / Goal conversoins / Ecommerce orders/cart updates don't have page title. So, proposal would be something like:

Page URL: $URL ($ICON outlink)
Time: $TIME

For normal page view (type == action)

Page Title: $TITLE
Page URL: $URL
Time: $TIME

Regarding standard output, I have compiled a list of different action types currently supported: http://pastebin.com/b1d8jKeB

To see a most recent Live API output for non actions (for visitor attributes) check this file: https://github.com/piwik/piwik/blob/master/tests/integration/expected/test_ecommerceOrderWithItems__Live.getLastVisitsDetails_day.xml

In 1.5 there were a few additions to the output which are not yet on the demo but I will upgrade in the next few hours with latest RC so you can see output in your tests. But, ecommerce is not setup on demo so there won't be ecommerce examples, just the static files there.. is it possible to use these static files for building UI? I plan to make visitor generator generate ecommerce data, but not done yet..

Does it help?

tsteur commented 13 years ago

I've attached some new screenshots what I've done so far.

I think Last24 hours/ 30 minutes looks ok now. Made the "values" a bit bigger as they are more important than the titles "Last 24 hours...". If there is not enough space, they will automatically wrap.

There is now also enough space for the icons beside the date. There is possibly a problem on 240x320 devices but I think that's ok.

I've not finished the work on "Visitor - Details". It still looks a bit ugly and I currently have no idea how to display the "itemDetails" of the types "ecommerceOrder & ecommerceAbandonedCart". Do we need these information? Or is "revenue", "revenueTax", "revenueShipping", ... enough?

By the way: Do all icons have the same size? 18w x 12h?

Yes, it does help! Thank you

mattab commented 13 years ago

NICE improvements!

Live review:

Last X -> looks very good! :)
When Visit converted 0 goals, do not display it
Before Visit converted 1 goal, maybe show the Goal icon? (ie <visitConvertedIcon>)
SE ranking #1, could maybe be in a little box, or in brackets. Maybe also could have "Rank: #1" to clarify it is the SE page result rank, not part of the actual keyword ;)
I think maybe you display the serverTimePrettyFirstAction? if this is the case, I think better to display: serverTimePretty and serverDatePretty - because visits are ordered by "last action DESC" which is serverTimePretty. I'm saying this because in the mockup the 2 first visits have times that are not ordered DESC

Details review:

visitCount translation is: General_NumberOfVisits. Maybe you wrote "Visitor count" as a piwik mobile translation?
btw, did you need to add any translation for Live feature?
From domain.com: could the full referrerUrl be displayed in grey maybe, in small letters, below this text (in same row?)
could icon be displayed before (or after?) country name?
I think better if we remove "Page URL/Page Title/Time" strings from Details output.
Maybe, the URL could be displayed in Grey (not too light, still quite visible), below the page title? The idea is to make the log readable and focus on the actions the visitor did, without having the humain reader to "visually parse" the data
in the Outlink row, there is a space on the left. Maybe because there is no title so the empty line puts a space..?
the line with the Goal icon has breakline before icon

Products in Ecommerce more information

I attach to the ticket a screenshot of the Piwik visitor log when there is an ecommerce order with products inside. <itemDetails> is the list of all products found in the Cart, or in the Ecommerce order. Maybe they can be displayed similarly to the screenshot: Example for Ecommerce order:

$ICON Ecommerce Order ($ORDERID)
Revenue: $X $CURRENCY, Subtotal: $Y $CURRENCY, $ETC.
List of Products (Quantity: $QUANTITY):
 * $PRODUCT NAME ($PRODUCT SKU), $PRODUCT_CATEGORY
 - $PRICE $CURRENCY - Quantity: $QTY
 * Product 2 idem
 * Product 3 etc. idem

$ORDERID in grey
$ETC: see the code in templates to display all revenues (with translation strings): https://github.com/piwik/piwik/blob/master/plugins/Live/templates/visitorLog.tpl#L152
Ecommerce order is translated: 'Goals_EcommerceOrder', Abandoned cart 'Goals_AbandonedCart'
Only Product SKU is sure to be defined. Sometimes, Product name will be defined, sometimes Category, sometimes all 3. See template code for related (simple) logic: https://github.com/piwik/piwik/blob/master/plugins/Live/templates/visitorLog.tpl#L170

Icons: icons have different sizes.. outlink is 10x9, countries are 18x12, browsers & plugins are 14x14, others are 16x16... Do you need to know sizes of icons in advance? I prefer not to add icon sizes in Live output (too much info) but maybe you can hardcode in the code if you need the sizes before fetching? What do you think?

Btw, is there a caching system for caching all icons from piwik?

tsteur commented 13 years ago

Hey,

I've attached some updated screens. I display values only if they are "set" now.

I already use "serverTimePretty and serverDatePretty". There was just an error in the mockup.

Titanium caches the icons automatically. I've hard coded the sizes now.

Indeed. I need some translations

"Live!"
"Visit Converted"
"Goals Converted"
"Outlink"
"Goal"
"Download"
"Rank"
"System" maybe there exists already a key under another, better naming?
"OS" I know there is a key for "Operating System", but I think we should use a smaller text here... maybe we do not have to translate this abbr.?
"Visitor" maybe we could display anything else in the visitor screen. For example "serverTimePretty", "New Visitor" (visitor type) or something else. Don't know what's the most important information about a specific user is. That would us also save us a row.

Todo list:

I still have to display icons for Country/Browser/OS in "visitor screen"
Haven't tested it on Android yet.
$ORDERID isn't grey at the moment, it's not that easy. Inline formatting isn't possible.
Haven't implemented paging (Visitor Log) yet

mattab commented 13 years ago

SO NICE!! ;)

Some feedback:

Maybe, truncate the referrer URL after 100 characters or so? and display "..."
In the detailed view, "From Google", can you put keyword used? such as "From Google: 'piwik analytics open'"
OK to leave "order id" in black if not easy to put in grey (small detail)
Could the "From Google" row be clickable to the actual referrer url? I'm not sure if it's possible to make things clickable without closing the app...?
instead of "Visit converted Yes/No" and "Goals Converted X", maybe it's better to write: "Visit converted 7 Goals", using translation: General_VisitConvertedNGoals and Live,attribute: <goalConversions> This way, no need for these new translation and one less row?
Number of visits: X --> please hide, and put this information in same row as "Visitor type: returning (X visits)", or "Visitor type: new visit"
Where is Live! displayed? maybe we can write Live_VisitorsInRealTime Visitors in real time?
Rank is 'SEO_Rank'
System is 'UserSettings_VisitorSettings'
OS: not translated, OS is OK
"Outlink"/"Goal"/"Download" --> OK, please add then in en.php in trunk with prefix General_

Everything else looks great, this is exciting!!

tsteur commented 13 years ago

(In [4866]) refs #1956 implemented live (real time), visitor log and a detailed visitor view for Piwik Mobile. Works on Android as well as iOS

tsteur commented 13 years ago

Updated screenshots :)

"From Google" is clickable now if a referrerUrl is defined. The urls in actions are not yet clickable. It simply opens the system browser and Piwik Mobile is still opened in the "background".

I'll add the new translations in en.php today or tomorrow. Works now also on Android but I have to test it on some devices regarding performance (especially whether scrolling is fast). Visitor Log is also implemented.

I still have to display icons for Country/Browser/OS in "visitor screen". I'll create a new ticket for this and try to implement it for a further release. Layouting is no fun with Titanium :)

Let me know if you have some further ideas. It feels good.

tsteur commented 13 years ago

The performance on an older Android device (500MHZ, 196MB RAM) may be a bit better, but is surprisingly good.

tsteur commented 13 years ago

(In [4877]) refs #1956 do not use an already rendered visitorRow again on a refresh (we have to render the row again), otherwise the visitorRow will be displayed multiple times on iOS

tsteur commented 13 years ago

(In [4878]) refs #1956 added visitor translation, renamed some other translations

mattab commented 13 years ago

Great it looks perfect now :) I assume that Ecommerce Cart/Order with products will display like on the mockup you showed earlier?

For icons, Country/Browser/OS and also maybe add the "Goal" icon after the text "Visitor converted N goals" ?

Excited to see this released!!

tsteur commented 13 years ago

(In [4885]) refs #1956 added translations for real time widget in Piwik Mobile and added some other missing translations

tsteur commented 13 years ago

(In [4914]) refs #1956 restart autoRefresh after resuming the app on iOS

tsteur commented 13 years ago

(In [4916]) refs #1956 display time and date from firstAction in visitor log, not lastAction

tsteur commented 13 years ago

(In [4929]) fixes #1956 always prefer the usage of maxVisitId and do display a loading message while fetching data

matomo-org / matomo-mobile-2

Implement Live! widget in Piwik Mobile #1956