Page Overlay - Analytics Overlay on your site! (Aka in-site analytics)

mattab commented 13 years ago

In order to show analytics data as an overlay, we have to set up a cross-domain communication protocol. The aim of this ticket is to complete a simple version of the feature that provides extensible mechanisms for the communication. Based on this, we can add more things to it.

Page Overlay displays a block around each link showing the % of clicks on this link. the user can still browse the website. On the left a sidebar displays the key statistics for the currently viewed page. It also easily allows the user to open the Page Transitions report and the Row evolution historical report for this particular page.

See #3530 List of Page Overlay Improvements for more info and the current state of the art!

mattab commented 11 years ago

Attachment: overlay - small height when firebug enabled.png

mattab commented 11 years ago

Attachment: Overlay - Hovering on the big banner on netjuggler.net shows a orange border in wrong position .png

mattab commented 11 years ago

Attachment: Overlay - links that are behind hovered menu are still displayed.png

mattab commented 13 years ago

From EZDesign:

I did some research on in-page analytics. Sounds very interesting.

But as it turns out, manipulating the iframe is far from easy to do. I think, I figured out how Google does it and posted it as a reply to a stack overflow question:

http://stackoverflow.com/questions/5210897/how-does-google-analytics-in-page-analytics-work/

I think it's quite problematic, that Google injects something the user doesn't really want, which demonstrates what kind of power Google has. I think this is not really a problem in our case, because we don't inject it, the users do (from their servers which are under their control).

In general, is this feature something we want? It definately is a piece of work, but it's quite a fancy feature. Seeing how much people like to be close to their visitors (i.e. Live), this should be received well!

mattab commented 13 years ago

Timo, in page analytics would be a great feature to have for sure... especially since we can do it with the current data set and don't need to track more data.

The main limitation of this feature I think is that it doesn't differentiate few places linking to the same URL, so you don't know if users clicked mostly on top link or bottom link to "Contact us". But I guess we could somehow fix this issue later on, by storing some kind of unique ID for the DOM node being clicked, and add this field in the log_link_visit_action table ;) this would be hard code but I think possible without changing too many things. Anyway, not for V1!!

We probably could not pre-process the data, so it would be read from the logs directly (still fetched from an API function). Performance wise, we don't have an INDEX on the field idaction_url_ref so GROUP BY on this field will be pretty slow. We could add the INDEX, or maybe just "recommend" users to do it if they find the feature slow to use...? Adding the index for everybody sounds not ideal since it would have a non trivial performance/disk space overhead. But, it might work fine without it for most users anyway!

Also there will be some interesting DOM manipulation to detect all links to another URL (and normalizing URLs in the page transforming ../ etc. in the full URL).

Note that in Piwik we record the URL after removing some URL parameters. You can call getSiteFromId() and then look at excluded_parameters attribute to have the list of all excluded parameters. It is important to remove these from the links detected on the page to ensure you can match the same URLs. Also, common session parameters are excluded (see API SitesManager.getExcludedQueryParametersGlobal()) as well as Piwik campaign parameters (see campaign_var_name and campaign_keyword_var_name in global.ini.php).

Note that I have tried GA in page analytics on 3 different GA accounts but it didn't work in any of them... so I feel like the other guy in stackoverflow "The answer to 'how does it work' is 'it doesnt work'" ;)

Regarding how it works, I haven't looked into it but my first idea would not be to do iframe overlay, but to inject additional DOM elements that would show up on Hover and show the data for each link... Not sure if that would work or if iframe idea is better?

I think that, if we implement this feature, we'll need the "filter" dropdown as well, without it the page would look too busy and full of data maybe..

It would be great & useful & fun feature :)

timo-bes commented 11 years ago

The current working title of the feature is "Insight" or "Page Insight". We recently started using the word "Insight" for intelligent alerts, which would probably be a better way to use it. So we might want to come up with a better name.

Others call the feature "in-site analytics" or "on-site analytics". One suggestion I have is "Piwik Overlay" - but in the menu, it would be shortened as "Overlay". Or maybe "Page Overlay"?

Every comment is appreciated.

timo-bes commented 11 years ago

(In [7223]) refs #2465: Starting the Insight plugin (in-site analytics)

This is the code I wrote about a year ago :)

There are several things that will be changed / removed but it's still good to have it in SVN - that's why I commit it like this.

timo-bes commented 11 years ago

(In [7224]) refs #2465: removed code for resolutions overlay - it turned out to be not that useful. maybe we can rethink it in the future.

timo-bes commented 11 years ago

(In [7225]) refs #2465 svn properties for new files

timo-bes commented 11 years ago

(In [7226]) refs #2465 removed alias domain normalization. it's now consistent with the behavior of transitions which is good for reusing the transitions report.

timo-bes commented 11 years ago

(In [7227]) refs #2465, refs #3332: using Transitions for getting the following pages in Insight

timo-bes commented 11 years ago

(In [7228]) refs #2465 Insight is starting to be cool

highlight links on hover, displaying a border and the absolute number of clicks. also, the bubble (along with all other bubbles for links to the same url) is highlighted and the url is shown in the status (lower right corner)
bubbles are updated when links are hidden or added. this is useful for drop-down navigations or ajax content.
code formatter applied (some whitespace changes)

mattab commented 11 years ago

Just an idea while I think of it:

it would be great to also show a link to open Transitions popover. I will review in more details later.
also would be great to see a link to Row Evolution, as it shows historical evolution Maybe these 2 could be next to the 2 icons, written in grey, below the list of Metrics, in a new section "More insights on this Page:" ?

timo-bes commented 11 years ago

(In [7261]) refs #2465 improved efficiency of insight tracker extension.

you can review piwik.js now, i don't plan to change it any more.

timo-bes commented 11 years ago

When you open an insight session, you get JS errors like this (at least in Chrome, I haven't checked other browsers):

Unsafe JavaScript attempt to access frame with URL http://piwik.server/index.php?module=CoreHome&action=index&idSite=1&period=week&date=2012-06-24#module=Insight&action=index&idSite=1&period=week&date=2012-06-24 from frame with URL http://web.site/path/. Domains, protocols and ports must match.

It is thrown in piwik.js / getReferrer (line 640) because Piwik is checking the referrer of the parent document, which is the Piwik UI. The same origin policy doesn't allow that.

Who knows how we can avoid that?

timo-bes commented 11 years ago

(In [7262]) refs #2465 using piwikHelper.ajaxCall to build ajax call. it now works for date ranges as well.

timo-bes commented 11 years ago

(In [7263]) refs #2465

FULL SCREEN MODE!
smoother handling of the case when there are no pageviews for the current url
hovering the bubbles highlights the links as well
safer repositioning of bubbles (timeout instead of interval)
adding breakpoints to the current url

mattab commented 11 years ago

(In [7306]) Refs #2465 Fixing JSLINT errors + packaging changes in piwik.js in the minified script

Note there are still 2 JSlint errors.

PS: Timo, I will carefully review your work on this ticket after 1.9.1 is out!

mattab commented 11 years ago

This ticket will ideally be closed on Nov 15th, then we could reopen a new one with the pending new features and ideas for improvements.

timo-bes commented 11 years ago

(In [7392]) refs #2465

removed hardcoded domain (this is what caused the error on the demo and all other piwik instances)
force iframe height in firefox (height:100% doesn't work)

timo-bes commented 11 years ago

(In [7393]) refs #2465

this time, forcing the iframe height is included in the commit
client side url normalization: remove excluded parameters

timo-bes commented 11 years ago

(In [7405]) refs #2465 Insight

links to the current url get a bubble as well
limit for the number of pages loaded from the API can be configured
ready for translation
url normalizer doesn't remove the hash part anymore (which corresponds to the latest behavior of the tracker)

timo-bes commented 11 years ago

Here are some things I'd like to hear your comments about:

As mentioned before, the name Insight would be better for intelligent analysis and alerts. Further, "Overlay" might be a better name for this plugin. How do you feel about renaming it Overlay? This would also be more suitiable in combination with heatmap.
The data quality in Transitions and Insight would be improved a lot if the tracker would not record outlinks and downloads as previous actions. When a visitor clicks multiple download links on one page, only the first one will show up in Transitions and Insight because for the other clicks, the previous action was the download made before. Would it be a good idea (and doable) to track this differently - i.e. when a download/outlink occurs after a pageview, keep the pageview as the previous action for the next download/outlink?
There are commented out test cases in client/urlnormalizer.js. Obviously, that's not the right place for them. But where would be the right place?

timo-bes commented 11 years ago

Could you please release a beta so I can do some more tests?

timo-bes commented 11 years ago

(In [7418]) refs #2465 Insight

new action: open in new tab - opens Insight session without an iframe
handle excluded parameters when loading the sidebar and following pages data
highlighting of linked images works properly now
tooltip showing the domain of the iframe

timo-bes commented 11 years ago

(In [7419]) refs #2465

renaming menu item to "Page Overlay", putting it under Actions
config option to disable framed mode altogether (can be used when websites contain frame busters)
fixed error for anonymous user
loading message in framed mode

timo-bes commented 11 years ago

In Piwik_Insight_API::getExcludedQueryParameters I had to catch an exception that is thrown in Piwik_SitesManager_API::getExcludedQueryParametersGlobal when the user has no admin access at all (Piwik::checkUserHasSomeAdminAccess). In this case, excluded parameters are not handled by Insight. This means that when using anonymous access, excluded parameters don't work.

Wouldn't it better to check in Piwik_SitesManager_API::getExcludedQueryParametersGlobal whether the user has some view access instad of some admin access? Or what's the reason for checking admin access?

timo-bes commented 11 years ago

(In [7420]) refs #2465

links in the pages report can be opened in insight instead of a new tab (to enable, use config option insight_launch_from_pages_report)
links containing an image should really work properly now
plugin description set

mattab commented 11 years ago

(In [7426]) Testing Page Overlay on demo Refs #2465

mattab commented 11 years ago

As mentioned before, the name Insight would be better for intelligent analysis and alerts. Further, "Overlay" might be a better name for this plugin. How do you feel about renaming it Overlay? This would also be more suitiable in combination with heatmap.

Overlay sounds like a plan indeed. It is more general and will allow us to easily include other concepts in it. Do you mind renaming all files and the plugin itself? It's quite a job but definitely worth it. we are regretting not doing it for PDFReports which should be called ScheduledReports.

The data quality in Transitions and Insight would be improved a lot if the tracker would not record outlinks and downloads as previous actions. When a visitor clicks multiple download links on one page, only the first one will show up in Transitions and Insight because for the other clicks, the previous action was the download made before. Would it be a good idea (and doable) to track this differently - i.e. when a download/outlink occurs after a pageview, keep the pageview as the previous action for the next download/outlink?

it's great data value to know, from which page URL downloads were made. Because I'd like to know, where latest.Zip was downloaded from exactly. This is why it would be useful to be able to click on a File or Outlink in Transitions, to get the referrers for this download/outlink.

But you are right, that we should not track referrers when they are downloads or outlinks as it does not make as much sense!! Here is my proposed patch which I haven't tested (tests take still forever for me, yet to get a SSD ;)) but it will work I think:

+++ core/Tracker/Visit.php  (revision )
@@ -349,7 +349,13 @@
        $sqlActionUpdate = '';
        if($idActionUrl !== false)
        {
+           // In Transitions and Site Overlay reports,
+           // A given Action being looked at can only have an internal referrer of Pageview or Search.
+           // Downloads and Outlinks will not be tracked as "previous action".
+           if( in_array($actionType, array(Piwik_Tracker_Action::TYPE_ACTION_URL, Piwik_Tracker_Action::TYPE_SITE_SEARCH)) )
+           {
-           $valuesToUpdate['visit_exit_idaction_url'] = $idActionUrl;
+               $valuesToUpdate['visit_exit_idaction_url'] = $idActionUrl;
+           }
            $sqlActionUpdate .= "visit_total_actions = visit_total_actions + 1, ";
        }
        if(!empty($idActionName))

EDIT: we should remove sum_time_spent on all outlinks and downloads Datatables and expected/ API outputs since it currently contains sum_time_spent, and when this patch is applied they all become zero.

There are commented out test cases in client/urlnormalizer.js. Obviously, that's not the right place for them. But where would be the right place?

We have javascript tests running in: piwik/tests/javascript/

See: https://github.com/piwik/piwik/blob/master/tests/javascript/index.php#L425

You can create test groups, and easily add powerful unit tests to all the new Javascript code. If you read through the file once you should get a good idea of how tests work. I have tried to maintain the tests coverage high of piwik.js since Anthon's initial great work on these JS tests. +1 to add solid unit tests coverage for the tricky URL normalization parts!

mattab commented 11 years ago

Timo, you did it again!! An awesome new feature designed in a very nice fashion... I can't stress enough how great it feels :-)

I will put the review first of the UI and some suggestions for changes and tweaks to make UI better and more usable - I will post code review in a few hours.

UI/UX

I like the "Page: /XXXX" at the top of the iframe. However it takes up one line which removes pixels for the initial view of Transitions feature. I think the report would look much nicer, if the "Page Name" being looked at was actually displayed inside a new BOX similar to the "Calendar" that would read "Page: /XXXX" similarly but this way, it would not take an extra line.
- The box would also highlight the Page URL being looked at and would clarify what this is about. Even maybe it should say "Page Overlay for: /XXX" ?
In the left sidebar:
- it would be nice if "View Transitions" and "View Page Evolution" were available with icon+text similar to Full Screen link, and would open the Row evolution/Transitions report as an overlay on top of the Site Overlay. This would be Uber Awesome.
- "Open in new tab" can use same CSS style as "Go Full screen" and use the std piwik orange-link icon
I Love the full screen mode, and the Awesome display on overlay on the website with no extra parameter!
- is it possible to ask a new mode: Trigger the overlay reports by calling http://example.org/#overlay (and default to the "User default" date + period, see ), without requiring to have Referrer?
- Could we display a half transparent Box that would invite user to click, which would then expand into an infobox, overlaid on the website (Maybe at bottom left or right?), that would show: the date range being looked at, and the list of metrics.
- This overlay box in the full screen mode, could later contain the calendar to let the user change the date that was pre-selected when using #overlay
- In general, the calendar should be displayed in the sidebar in the "Full screen mode" so that users always see which period the report is applied for. This is quite key in Piwik to always leave calendar or date displayed (like in Transitions)

Bugs Reports

On demo it does not show the number of clicks on the download file http://piwik.org/latest.zip - However, these clicks are shown correctly in the Transitions report so the underlying data is OK. It's important to see clicks to files in the overlay repotr since this is an excellent feature of Piwik VS GA because we do automatic file tracking :)
- Same for outlinks. Would be nice to see how many click on these buttons to fb/twitter for example (and could be very useful for checking advertising campaign queries)
- this is why I think the #overlay is very important. A webmaster could simply check the effectiveness of the marketing campaign from one page by going to the page and type #overlay and start his piwik experience from there!
when I have firebug enabled, the Iframe becomes much smaller (see attached screen). It would be nice if instead the iframe was the normal height with firebug on
The overlay for piwik.org Language selector menu bubbles are displayed, for items that are hidden. It would be nice if the hidden Javascript menu bubbles were displayed only when user hovers on the menu inside the Page Overlay Piwik report. The bubbles are currently always displayed.
Loading Page Overlay while using Piwik over SSL does not work in: https://demo.piwik.org/index.php?module=CoreHome&action=index&idSite=3&period=year&date=2012-11-08#module=Insight&action=index&idSite=3&period=year&date=2012-11-08 in Chrome: Unsafe JavaScript attempt to access frame with URL https://demo.piwik.org/index.php?module=CoreHome&action=index&idSite=7&period=year&date=2012-11-08#module=Insight&action=index&idSite=7&period=year&date=2012-11-08 from frame with URL http://forum.piwik.org/. Domains, protocols and ports must match.
- When Piwk is used over SSL the Page Overlay should load the site in iframe over SSL.
Data accuracy: as suggested by email, I think Form Post url discovery would be very nice to have!
When the page does not load for any reason, could you display a NOTICE message (in a JS Alert box or in the screen) such as "Page Overlay Report could not load for this website. here short troubleshooting or link to FAQ?"
- If we detect that Piwik is currently loaded over SSL, and the site doesn't load, we can suggest that the site does not support HTTPS and suggest them to use Piwik over http to view site overlay?

mattab commented 11 years ago

(In [7428]) Refs #2465 - Only require some view access to get excluded parameters As per Timo's suggestion in #2465

please remove the exception handler

timo-bes commented 11 years ago

Thanks for the feedback. It's a lot of stuff to go through...

Let's start with some comments about what you wrote:

in Chrome: Unsafe JavaScript attempt to access frame with URL https://demo.piwik.org/index.php?module=CoreHome&action=index&idSite=7&period=year&date=2012-11-08#module=Insight&action=index&idSite=7&period=year&date=2012-11-08 from frame with URL http://forum.piwik.org/. Domains, protocols and ports must match.

See #2465. It's a general tracker issue and not connected to Page Overlay.

"Open in new tab" can use same CSS style as "Go Full screen" and use the std piwik orange-link icon

I created an icon for it and it has a css style. You probably need to delete tmp/assets/* and hit refresh.

Attachment overlay - links appended bottom right.png added

That shouldn't happen... Can you tell me exactly which OS and browser you're using?

The overlay for piwik.org Language selector menu bubbles are displayed, for items that are hidden. It would be nice if the hidden Javascript menu bubbles were displayed only when user hovers on the menu inside the Page Overlay Piwik report. The bubbles are currently always displayed.

That should work. I will investigate why it doesn't work in this case. I'm using jquery's .is(':visible') to tell wether a link is hidden and it works fine on the pages I tested so far.

is it possible to ask a new mode: Trigger the overlay reports by calling http://example.org/#overlay (and default to the "User default" date + period, see ), without requiring to have Referrer?

It's possible but using the deafult date range probably isn't a good idea. The default date range is usually yesterday and picked to show you the latest stats. Normally, you want to see the Page Overlay for a longer period to have more data. So I will postpone this until we have a full sidebar including a date selection in the "new tab" mode. Otherwise, this will just cause frustration. Unfortunately, that's pretty low on my priority list.

I will now focus on the items with top priority and get as many of them done as I can for the release next week.

How do you feel about including Page Overlay in the release as a disabled plugin and write in the blog post that it's a beta release and people can enable it to check it out and tell us about problem they have on their websites. There will be problems for sure because people build weird websites...

mattab commented 11 years ago

Replying to EZdesign:

Thanks for the feedback. It's a lot of stuff to go through...

Let's start with some comments about what you wrote:

in Chrome: Unsafe JavaScript attempt to access frame with URL https://demo.piwik.org/index.php?module=CoreHome&action=index&idSite=7&period=year&date=2012-11-08#module=Insight&action=index&idSite=7&period=year&date=2012-11-08 from frame with URL http://forum.piwik.org/. Domains, protocols and ports must match.

See #2465. It's a general tracker issue and not connected to Page Overlay.

Attachment overlay - links appended bottom right.png added

That shouldn't happen... Can you tell me exactly which OS and browser you're using?

I couldn't reproduce again and actually didn't mean to attach it..

That should work. I will investigate why it doesn't work in this case. I'm using jquery's .is(':visible') to tell wether a link is hidden and it works fine on the pages I tested so far.

Cool! you can test on the demo, idsite=1

It's possible but using the deafult date range probably isn't a good idea. The default date range is usually yesterday and picked to show you the latest stats. Normally, you want to see the Page Overlay for a longer period to have more data. So I will postpone this until we have a full sidebar including a date selection in the "new tab" mode. Otherwise, this will just cause frustration. Unfortunately, that's pretty low on my priority list.

Agree that waiting for calendar is better for #overlay mode. The sidebar expandable on click in the Full screen mode will be a Killer, but indeed there are more important things first!

I will now focus on the items with top priority and get as many of them done as I can for the release next week. +1

How do you feel about including Page Overlay in the release as a disabled plugin and write in the blog post that it's a beta release and people can enable it to check it out and tell us about problem they have on their websites. There will be problems for sure because people build weird websites...

That's the plan I think! I would really like to leave it up for a few weeks with all documentation, but just have optin users so we get quality bug reports.

mattab commented 11 years ago

Continuing the review...

User Interface Feedback:

Add icon for Site Overlay in the Pages Reports Rows along with Transitions+Row Evolution?...
- Alternatively, and it might even more awesome (!!) we could link from Transitions to the Site Overlay: indeed Overlay will show more "following internal pages" so this is relevant. We could link to Overlay from a new icon in the Popover title. (this would close the Transitions popover and reload the menu to load Overlay)
- Also in Row Evolution, we could link to Site Overlay (this would close the Transitions popover and reload the menu to load Overlay -- or we could open overlay in a new tab...)
Your two icons look really good! Are you icon designer as well on your spare time? ;)
It would be great to have the same "cool icon style" for Row Evolution icon and Transitions icon. Would it be possible? :)
- Then we could replace the existing icons in "Pages" table reports. They could be Grey by default, and Blue on Hover which would look nice and more exciting to click on.
- These two icons would also be displayed below "Open in a new tab" in the Overlay Sidebar and would allow a user to open transitions/Row evolution popover! NICE!
- UI: "Open in new tab" should be "Open Overlay in new tab" for more clarity as what the feature does

Bug reports

When the page loaded in the iframe does not have the piwik.js loaded (for example if the alias URL is wrong or the homepage does not have piwik tracking code) then the overlay repotr will fail without message. Instead, we should display an error or warning message explaining that the Piwik Javascript file was not found on this website.
Missing URL in hash tag: When the Page Overlay is loaded, please also update the URL Hash with the currently looked at page URL. This way we can manually change it.

This is useful when I have to manually change it to keep using the feature. For example, when none of the links on the current page link to a page which has the piwik tracker, or when the default alias URL does not have the piwik.js on it and so there is a JS error, and if I click on the links it simply opens the clicked page in the current tab

timo-bes commented 11 years ago

Replying to matt:

Add icon for Site Overlay in the Pages Reports Rows along with Transitions+Row Evolution?...

Launching Overlay from the pages report is useful for large websites. But I didn't want to add a third icon because of the space it would take. If you want to connect Overlay and the pages report, you can use the setting insight_launch_from_pages_report. If you enable it, the links in the pages report won't open new tabs but will start an Overlay session.

Alternatively, and it might even more awesome (!!) we could link from Transitions to the Site Overlay: indeed Overlay will show more "following internal pages" so this is relevant. We could link to Overlay from a new icon in the Popover title. (this would close the Transitions popover and reload the menu to load Overlay)

Great Idea!

Also in Row Evolution, we could link to Site Overlay (this would close the Transitions popover and reload the menu to load Overlay -- or we could open overlay in a new tab...)

Why would you want to link from row evolution? It's not really connected. I think putting a row evolution link in Overlay is important but the other way around not so much.

It would be great to have the same "cool icon style" for Row Evolution icon and Transitions icon. Would it be possible? :)

I spent quite some time designing the current ones and think they are the best I can do. I'm really not much of a designer. I'm happy to let a designer come up with other ideas. But I think the icons in the actions report should be less visible than the blue and I'm pretty happy with them...

Missing URL in hash tag: When the Page Overlay is loaded, please also update the URL Hash with the currently looked at page URL. This way we can manually change it.

I tried to do that but it totally screws up the history. Using the back and forward buttons works because they change the iframe location but if we change the location of the parent frame, there will be weird effects. I tried for over an hour to get it right but couldn't do it.

This is useful when I have to manually change it to keep using the feature. For example, when none of the links on the current page link to a page which has the piwik tracker, or when the default alias URL does not have the piwik.js on it and so there is a JS error, and if I click on the links it simply opens the clicked page in the current tab

This is why I added the config option to link from the pages report. If your page does something strange, you can use that. Maybe we can even add another option to remove Page Overlay from the menu so it will be only accessible from the actions report? You could use that when your home page doesn't contain the Piwik tracker because starting the session won't work in this case. What do you think?

timo-bes commented 11 years ago

I created a ticket with possible improvements. This will add some structure to our discussion: #3530

I also have a private note with about 8 screen heights worth of stuff but what's in the ticket should be a fair start :)

timo-bes commented 11 years ago

(In [7431]) refs #2465

finally figured out how to use browser history + location parameter. wohooo! works perfectly in chrome/safari and almost perfectly in firefox; will do more tests later.
minor lang changes

mattab commented 11 years ago

Why would you want to link from row evolution? It's not really connected. I think putting a row evolution link in Overlay is important but the other way around not so much.

It would be cool to have the link in the popover, at the bottom, because it would help feature discoverability... but not as useful as Transitions>Overlay indeed

This is useful when I have to manually change it to keep using the feature. For example, when none of the links on the current page link to a page which has the piwik tracker, or when the default alias URL does not have the piwik.js on it and so there is a JS error, and if I click on the links it simply opens the clicked page in the current tab

This is why I added the config option to link from the pages report. If your page does something strange, you can use that. Maybe we can even add another option to remove Page Overlay from the menu so it will be only accessible from the actions report? You could use that when your home page doesn't contain the Piwik tracker because starting the session won't work in this case. What do you think?

OK that history cannot work with iframes history as well, thanks for trying anyway

About my bug: I was using Piwik correctly: I set "Alias URL" to example.com but I was only tracking example.com/dir -- so when Overlay loaded with example.com it failed and I was stuck and could not use Overlay.

Solution to this bug: When user click on Actions > Overlay, could we load by default the "Top Page URL" rather than the first Alias URL?

timo-bes commented 11 years ago

(In [7434]) refs #2465

discover links that are added by JS, remove bubbles for links that have been removed
safer timeout/resize handling
adding some comments
code formatter applied (white space changes)

timo-bes commented 11 years ago

Replying to matt:

I was using Piwik correctly: I set "Alias URL" to example.com but I was only tracking example.com/dir -- so when Overlay loaded with example.com it failed and I was stuck and could not use Overlay.

That's the exact problem we were facing with my client's website. That's why I added the config option and they launch it from the actions report. I think it would help to add another config option that would hide Overlay from the menu. With these two options combined you could make it only accessible via the pages report and this way make sure that it is only openend for pages tracked by piwik. What do you think?

Solution to this bug: When user click on Actions > Overlay, could we load by default the "Top Page URL" rather than the first Alias URL?

What is the "Top Page URL"? The one with most hits? Might be counter-intuitive in many cases. The solution above is the best we could come up with. Maybe there's something we're missing...

timo-bes commented 11 years ago

Can you tell me why "Page Overlay" appers left of "Downloads" in the menu? It has order 60 while "Downloads" has 7.

timo-bes commented 11 years ago

(In [7435]) refs #2465

in addition to using jquery's .is(':visible'), check for visibility==hidden to determine whether a link is visible.
this should fix the issues where the bubbles are shown even though the links are not shown at the moment. please deploy on the demo and check.

timo-bes commented 11 years ago

Attachment Overlay - links that are behind hovered menu are still displayed.png added

I don't think there's a way to avoid that. Does anybody know how we could tell (efficiently) when a link is behind another dom element? (By the way, Google's JS devs don't.)

timo-bes commented 11 years ago

(In [7436]) refs #2465

using filter_limit=-1 when requesting the api from the overlay session
this should fix the bug that there's no bubble next to latest.zip on the demo (the problem was that following pages come first and if there is a certain number of them, all outlinks and downloads are cut off)

mattab commented 11 years ago

(In [7438]) Refs #2465 Adding Insight to list of non tested plugins for integration tests... once the API is final and all other core things are done, it wiill be nice to add integration tests (but better focus on functionnality first)

mattab commented 11 years ago

(In [7439]) Refs #2465 Adding Insight to list of non tested plugins for integration tests... once the API is final and all other core things are done, it wiill be nice to add integration tests (but better focus on functionnality first)

mattab commented 11 years ago

(In [7440]) Refs #2465 Will release latest beta on demo!

mattab commented 11 years ago

UI / UX Suggestions of small changes that will make feature more fun and usable:

In the bottom of the sidebar:
- i would like to see a new discreet option "Show Clicks instead of % clicks" because, for many users it makes more sense to look at number of raw clicks rather than percentage. Also the number can be more visual than the percentage. In particular I find bubbles such as "0.6%" confusing because it takes many digits yet is irrelevant.
- Could be fun to have similar a mode "Highlight All Links" that would put a dark grey overlay on the site and only show the bubbles. For example on one site I track there are so many images etc. that the bubles are hard to see (especially which ones are high). Having a simple darker overlay for the site, would help (and I'd just like to turn it off/on quickly as a UI helper tool to better discover the Overlay report in general)
the full screen mode is great!! In fact it's much better than non full screen, by default it's too distracting I find. So I think full screen is key to having a good "Overlay" report experience.
In full screen mode, I have some suggestions of small UX changes that will improve usability:
- Hitting ESC should close full screen mode (escape is like a click on "close full screen")
- it would be nice to display hte "Popover close" icon in the top left (in sidebar) so that a user could easily "close" the full screen mode and go back to piwik (or hit ESC or click Exit full screen). The more easy we make to exit the full screen the more it will be used!
- in full screen, there should be a way to "collapse" the sidebar. This is because, some websites are distorted with the sidebar on the left
- please add &fullscreen or similar, to the Hash tag so that we can copy paste full screen reports by email and IM
When a link is hovered, the other similar links on the page are highlighted in orange. That's great. I propose that, when the bubble is clicked, the orange border also appears around all same links on the page. This way we could see at a glance the other links sharing this number of clicks.

EDIT: Clicking the bubble again of any of these same links would "toggle / hide" these borders on the same link.

mattab commented 11 years ago

Very nice recent changes, well done! The latest.zip stats now display and shows 16% conversion rates for the download from homepage, very cool!

matomo-org / matomo

Page Overlay - Analytics Overlay on your site! (Aka in-site analytics) #2465