New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Heatmap plugin for Piwik + Click + Scroll maps #6371

Closed
mattab opened this Issue Oct 2, 2014 · 36 comments

Comments

Projects
None yet
@mattab
Member

mattab commented Oct 2, 2014

The goal of this issue is to discuss the potentially amazing new feature of providing Heatmaps for Piwik.

This is follow up to the long & now locked original issue heatmap issue: #5493

Feel free to comment here with any idea on how Heatmap could be done!

@szepeviktor

This comment has been minimized.

Show comment
Hide comment
@szepeviktor

szepeviktor Oct 2, 2014

Contributor

For a start it would nice to have a "basic" click and scroll map.

Contributor

szepeviktor commented Oct 2, 2014

For a start it would nice to have a "basic" click and scroll map.

@MarcusHKrueger

This comment has been minimized.

Show comment
Hide comment
@MarcusHKrueger

MarcusHKrueger Oct 30, 2014

I'm actually at present trying to decide if I want Piwik or Open Web Analytics. I REALLY wanted a heatmap, and was quite disappointed there wasn't one here in Piwik. But the PHP Library and stuff they have to improve tracking just simply can't be beaten.

A heatmap would make this project PERFECT. Even if it's REALLY basic, I'd like if we could have a simple scroll and click detection, nothing major.

In the long run, a heatmap that could track individual elements on a page would be better. I say this because I have jQuery UI Dialog boxes that can be open, and I would LOVE if the dialog box could have a separate heatmap.

I'm curious though, why hasn't this at least been done in a plugin? Is creating a plugin not possible due to restrictions by Piwik or is it just too much effort?

MarcusHKrueger commented Oct 30, 2014

I'm actually at present trying to decide if I want Piwik or Open Web Analytics. I REALLY wanted a heatmap, and was quite disappointed there wasn't one here in Piwik. But the PHP Library and stuff they have to improve tracking just simply can't be beaten.

A heatmap would make this project PERFECT. Even if it's REALLY basic, I'd like if we could have a simple scroll and click detection, nothing major.

In the long run, a heatmap that could track individual elements on a page would be better. I say this because I have jQuery UI Dialog boxes that can be open, and I would LOVE if the dialog box could have a separate heatmap.

I'm curious though, why hasn't this at least been done in a plugin? Is creating a plugin not possible due to restrictions by Piwik or is it just too much effort?

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Oct 30, 2014

Member

In the long run, a heatmap that could track individual elements on a page would be better. I say this because I have jQuery UI Dialog boxes that can be open, and I would LOVE if the dialog box could have a separate heatmap.

heatmap may not be the best tool for you. For this particular use case we have built a new innovative feature that we call Content Tracking. It lets you track any element on the page and will give you useful reports such as how many times elements were seen and how many times they were clicked. Check this out: http://piwik.org/docs/content-tracking/

Member

mattab commented Oct 30, 2014

In the long run, a heatmap that could track individual elements on a page would be better. I say this because I have jQuery UI Dialog boxes that can be open, and I would LOVE if the dialog box could have a separate heatmap.

heatmap may not be the best tool for you. For this particular use case we have built a new innovative feature that we call Content Tracking. It lets you track any element on the page and will give you useful reports such as how many times elements were seen and how many times they were clicked. Check this out: http://piwik.org/docs/content-tracking/

@szepeviktor

This comment has been minimized.

Show comment
Hide comment
@szepeviktor

szepeviktor Oct 30, 2014

Contributor

@mattab Thank you!
That is more useful feature indeed.

Contributor

szepeviktor commented Oct 30, 2014

@mattab Thank you!
That is more useful feature indeed.

@mpdude

This comment has been minimized.

Show comment
Hide comment
@mpdude

mpdude Nov 2, 2014

Can I use Content Tracking to find out whether users prefer using the navigation or in-text links, or if they reach the bottom of the page?

Can I possibly break this down for single pages?

mpdude commented Nov 2, 2014

Can I use Content Tracking to find out whether users prefer using the navigation or in-text links, or if they reach the bottom of the page?

Can I possibly break this down for single pages?

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Nov 3, 2014

Member

Can I use Content Tracking to find out whether users prefer using the n avigation or in-text links,

Not super easy but you can definitely measure the performance and CTR (clickthrough ratio) of your page elements.

ideally for easier comparison you would use A/B testing to be able to compare the performance of each page. #459

Can I possibly break this down for single pages?

For this you can try to create Segments for each Page URL that you are interested in. Let us know if this works ok.

In the future we'll make creating segments from Page URL even easier via a new icon: #4633

Member

mattab commented Nov 3, 2014

Can I use Content Tracking to find out whether users prefer using the n avigation or in-text links,

Not super easy but you can definitely measure the performance and CTR (clickthrough ratio) of your page elements.

ideally for easier comparison you would use A/B testing to be able to compare the performance of each page. #459

Can I possibly break this down for single pages?

For this you can try to create Segments for each Page URL that you are interested in. Let us know if this works ok.

In the future we'll make creating segments from Page URL even easier via a new icon: #4633

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Jan 22, 2015

Member

Here's an interesting blog post re Heatmaps:

Really, the ol.layer.Heatmap layer uses a smart approximation to the algorithm which produces great results and is really fast.
http://java.dzone.com/articles/how-javascript-heatmap
http://openlayers.org/

Member

tsteur commented Jan 22, 2015

Here's an interesting blog post re Heatmaps:

Really, the ol.layer.Heatmap layer uses a smart approximation to the algorithm which produces great results and is really fast.
http://java.dzone.com/articles/how-javascript-heatmap
http://openlayers.org/

@marclaporte

This comment has been minimized.

Show comment
Hide comment
@marclaporte

marclaporte Mar 22, 2015

Contributor

"By using eye tracking heatmaps, screen-capture (actual recordings of the screen during visitor sessions) and user-interaction analytics, Inspectlet gives webmasters a way to observe their visitors’ actions naturally."
https://blog.builtwith.com/2014/01/20/inspectlet-technology-growth-award-winner/

Contributor

marclaporte commented Mar 22, 2015

"By using eye tracking heatmaps, screen-capture (actual recordings of the screen during visitor sessions) and user-interaction analytics, Inspectlet gives webmasters a way to observe their visitors’ actions naturally."
https://blog.builtwith.com/2014/01/20/inspectlet-technology-growth-award-winner/

@johnnabil

This comment has been minimized.

Show comment
Hide comment
@johnnabil

johnnabil Mar 25, 2015

I tried the content tracking , but is there any possibility i can track everything on my page without having explicitly add it.

Is there any plan for adding heat or click map ?

johnnabil commented Mar 25, 2015

I tried the content tracking , but is there any possibility i can track everything on my page without having explicitly add it.

Is there any plan for adding heat or click map ?

@clarknelson

This comment has been minimized.

Show comment
Hide comment
@clarknelson

clarknelson Mar 27, 2015

I would also really like this implemented.

clarknelson commented Mar 27, 2015

I would also really like this implemented.

@clarknelson

This comment has been minimized.

Show comment
Hide comment
@clarknelson

clarknelson Mar 27, 2015

After looking around for a bit, I found this https://github.com/pa7/heatmap.js
How hard would it be to integrate this with Piwik?

clarknelson commented Mar 27, 2015

After looking around for a bit, I found this https://github.com/pa7/heatmap.js
How hard would it be to integrate this with Piwik?

@szepeviktor

This comment has been minimized.

Show comment
Hide comment
@szepeviktor

szepeviktor Mar 27, 2015

Contributor

That only displays the heatmap, does not record it.

Contributor

szepeviktor commented Mar 27, 2015

That only displays the heatmap, does not record it.

@aimeos

This comment has been minimized.

Show comment
Hide comment
@aimeos

aimeos Mar 31, 2015

+1, an integrated heatmap in Piwik is the missing piece we are looking for

aimeos commented Mar 31, 2015

+1, an integrated heatmap in Piwik is the missing piece we are looking for

@johnnabil

This comment has been minimized.

Show comment
Hide comment
@johnnabil

johnnabil Mar 31, 2015

@jailbot , is it possible to use heatmap.js in commercial project, i think its license is MIT , right ?

johnnabil commented Mar 31, 2015

@jailbot , is it possible to use heatmap.js in commercial project, i think its license is MIT , right ?

@clarknelson

This comment has been minimized.

Show comment
Hide comment
@clarknelson

clarknelson Mar 31, 2015

Is that what that means? Is Piwik commercial I thought it was open source?

clarknelson commented Mar 31, 2015

Is that what that means? Is Piwik commercial I thought it was open source?

@Globulopolis

This comment has been minimized.

Show comment
Hide comment
@Globulopolis

Globulopolis Mar 31, 2015

Contributor

@jailbot yep, Piwik is open source, but can be used in commercial projects.

Contributor

Globulopolis commented Mar 31, 2015

@jailbot yep, Piwik is open source, but can be used in commercial projects.

@clarknelson

This comment has been minimized.

Show comment
Hide comment
@clarknelson

clarknelson Mar 31, 2015

Seems like heat map just requires some js wizardry.

  1. addEventListener('click')
  2. check viewport size, check cursor location
  3. mouse movement?
  4. screenshot?

This wouldn't be "easy" but it would make Piwik much nicer.

clarknelson commented Mar 31, 2015

Seems like heat map just requires some js wizardry.

  1. addEventListener('click')
  2. check viewport size, check cursor location
  3. mouse movement?
  4. screenshot?

This wouldn't be "easy" but it would make Piwik much nicer.

@khIsm

This comment has been minimized.

Show comment
Hide comment
@khIsm

khIsm Apr 14, 2015

Hi,
I want to contribute in developping this plugin but I don't know really from where to start. Even in creating a new plugin I didn't find an example which guide you step by step. I saw the developer site and it's not enough. Who can help me ?
About heatmap, I think that the library that @jailbot mention is interresting.

khIsm commented Apr 14, 2015

Hi,
I want to contribute in developping this plugin but I don't know really from where to start. Even in creating a new plugin I didn't find an example which guide you step by step. I saw the developer site and it's not enough. Who can help me ?
About heatmap, I think that the library that @jailbot mention is interresting.

@szepeviktor

This comment has been minimized.

Show comment
Hide comment
@szepeviktor

szepeviktor Apr 14, 2015

Contributor

@khIsm look at this code: http://circles.demo.cujojs.com/
Somehow you have to buffer the captured positions and count for different recording and playback viewports. Register here and look and their tracker JS code: http://www.clicktale.com/trial

Contributor

szepeviktor commented Apr 14, 2015

@khIsm look at this code: http://circles.demo.cujojs.com/
Somehow you have to buffer the captured positions and count for different recording and playback viewports. Register here and look and their tracker JS code: http://www.clicktale.com/trial

@khIsm

This comment has been minimized.

Show comment
Hide comment
@khIsm

khIsm Apr 14, 2015

@szepeviktor I saw the circle demo and waiting for the approval of the trial for clicktale.
I think that inspectlet( http://www.inspectlet.com/ ) is good and it's based on the library of patrick wied( http://www.patrick-wied.at/static/heatmapjs/ ). It generates a code js code like piwik and I place it after the tag "head" it records what the user is doing and it shows heatmaps :
inspectlet

I think that it's a very interresting library

khIsm commented Apr 14, 2015

@szepeviktor I saw the circle demo and waiting for the approval of the trial for clicktale.
I think that inspectlet( http://www.inspectlet.com/ ) is good and it's based on the library of patrick wied( http://www.patrick-wied.at/static/heatmapjs/ ). It generates a code js code like piwik and I place it after the tag "head" it records what the user is doing and it shows heatmaps :
inspectlet

I think that it's a very interresting library

@szepeviktor

This comment has been minimized.

Show comment
Hide comment
@szepeviktor

szepeviktor Apr 14, 2015

Contributor

I've just realized that heatmap.js not just displays but records both moves and click.
Which would you like to implement?

Contributor

szepeviktor commented Apr 14, 2015

I've just realized that heatmap.js not just displays but records both moves and click.
Which would you like to implement?

@szepeviktor

This comment has been minimized.

Show comment
Hide comment
@szepeviktor

szepeviktor Apr 14, 2015

Contributor

Don't forget about buffering: both with data size limit and time limit.

Contributor

szepeviktor commented Apr 14, 2015

Don't forget about buffering: both with data size limit and time limit.

@khIsm

This comment has been minimized.

Show comment
Hide comment
@khIsm

khIsm Apr 15, 2015

Both of them are interesting, I'll be concentrated on tracking the mouse mouvement and if it's ok why not on clicks

khIsm commented Apr 15, 2015

Both of them are interesting, I'll be concentrated on tracking the mouse mouvement and if it's ok why not on clicks

@joubertredrat

This comment has been minimized.

Show comment
Hide comment
@joubertredrat

joubertredrat Apr 16, 2015

Contributor

Hmm, seems like good

Contributor

joubertredrat commented Apr 16, 2015

Hmm, seems like good

@piwikjapan

This comment has been minimized.

Show comment
Hide comment
@piwikjapan

piwikjapan Apr 27, 2015

Contributor

Now you can download ClickHeat plugin at Piwik marketplace. This plugin based on Dugwood's plugin, which was written on issue #5493 .
But, it's too complex to understand behavior, so please help, when bugs were found.

Contributor

piwikjapan commented Apr 27, 2015

Now you can download ClickHeat plugin at Piwik marketplace. This plugin based on Dugwood's plugin, which was written on issue #5493 .
But, it's too complex to understand behavior, so please help, when bugs were found.

@joubertredrat

This comment has been minimized.

Show comment
Hide comment
@joubertredrat

joubertredrat Apr 27, 2015

Contributor

Thanks @piwikjapan, I installed here and I will test, if have issues, I report on official repo.

Contributor

joubertredrat commented Apr 27, 2015

Thanks @piwikjapan, I installed here and I will test, if have issues, I report on official repo.

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Apr 27, 2015

Member

Well done @piwikjapan - I'm sure this will become a very popular plugin!

Member

mattab commented Apr 27, 2015

Well done @piwikjapan - I'm sure this will become a very popular plugin!

@peterk

This comment has been minimized.

Show comment
Hide comment
@peterk

peterk May 11, 2015

Problems with the redirect? See piwikjapan/plugin-clickheat#4

peterk commented May 11, 2015

Problems with the redirect? See piwikjapan/plugin-clickheat#4

@joubertredrat

This comment has been minimized.

Show comment
Hide comment
@joubertredrat

joubertredrat May 11, 2015

Contributor

@piwikjapan, in my piwik is running very fine!

I have a question, is possible to group clicks by day/week/month to show what area is more used?

Contributor

joubertredrat commented May 11, 2015

@piwikjapan, in my piwik is running very fine!

I have a question, is possible to group clicks by day/week/month to show what area is more used?

@piwikjapan

This comment has been minimized.

Show comment
Hide comment
@piwikjapan

piwikjapan May 11, 2015

Contributor

Thank you for your replies.

joubertredrat
day/week/month to show what area is more used

Unfortunately, ClickHeat's datas does not work with Piwik's and now ClickHeat does not consider that where customers are looking website. It's not impossible, but...

peterk

I just remodeled ClickHeat to work under Piwik 2.x. I do not know well area of JavaScript. Therefore, I will do my best, but problems take time to solve.
I know it still has a problem about install scripts. This is also important.

Contributor

piwikjapan commented May 11, 2015

Thank you for your replies.

joubertredrat
day/week/month to show what area is more used

Unfortunately, ClickHeat's datas does not work with Piwik's and now ClickHeat does not consider that where customers are looking website. It's not impossible, but...

peterk

I just remodeled ClickHeat to work under Piwik 2.x. I do not know well area of JavaScript. Therefore, I will do my best, but problems take time to solve.
I know it still has a problem about install scripts. This is also important.

@MagicFab

This comment has been minimized.

Show comment
Hide comment
@MagicFab

MagicFab Nov 9, 2015

@piwikjapan coudl you post screenshots of this here? It would be interesting to see the result. The plugin page has a screenshot but it seems broken, perhaps you can also update it?

MagicFab commented Nov 9, 2015

@piwikjapan coudl you post screenshots of this here? It would be interesting to see the result. The plugin page has a screenshot but it seems broken, perhaps you can also update it?

@sgiehl sgiehl added the c: New plugin label Jan 3, 2016

@benhartwich

This comment has been minimized.

Show comment
Hide comment
@benhartwich

benhartwich Feb 13, 2016

Heatmap of @piwikjapan does not longer work - I think there´s also no further development at the moment.

benhartwich commented Feb 13, 2016

Heatmap of @piwikjapan does not longer work - I think there´s also no further development at the moment.

@mattab mattab modified the milestones: Long term, Mid term Dec 5, 2016

@mattab mattab removed the Lower priority label Mar 24, 2017

@mattab mattab changed the title from Heatmap plugin for Piwik to Heatmap plugin for Piwik + Click + Scroll maps Mar 24, 2017

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Mar 24, 2017

Member

Good news: we're working on Heatmap Analytics for Piwik + scrollmap + click map! It will be awesome and make sure to hear when it's released by signing up here: http://www.heatmap-analytics.com/

Member

mattab commented Mar 24, 2017

Good news: we're working on Heatmap Analytics for Piwik + scrollmap + click map! It will be awesome and make sure to hear when it's released by signing up here: http://www.heatmap-analytics.com/

@joubertredrat

This comment has been minimized.

Show comment
Hide comment
@joubertredrat

joubertredrat Mar 24, 2017

Contributor

Hi @mattab nice news about this. This resource will be only for PRO or will be for open source too? Thanks

Contributor

joubertredrat commented Mar 24, 2017

Hi @mattab nice news about this. This resource will be only for PRO or will be for open source too? Thanks

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Mar 24, 2017

Member

@joubertredrat Heatmap will be a premium plugin which you can buy at a reasonnable price like our other Premium plugins: http://plugins.piwik.org/premium

Please note that we are not PRO as we, the people making Piwik, we have left the PRO company months ago: https://piwik.org/faq/new-to-piwik/faq_21984/

Member

mattab commented Mar 24, 2017

@joubertredrat Heatmap will be a premium plugin which you can buy at a reasonnable price like our other Premium plugins: http://plugins.piwik.org/premium

Please note that we are not PRO as we, the people making Piwik, we have left the PRO company months ago: https://piwik.org/faq/new-to-piwik/faq_21984/

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Oct 31, 2017

Member

Heatmap and Session Recording has been released 🎉
you can get it here: https://plugins.piwik.org/HeatmapSessionRecording

Or learn more in the user guides:

Member

mattab commented Oct 31, 2017

Heatmap and Session Recording has been released 🎉
you can get it here: https://plugins.piwik.org/HeatmapSessionRecording

Or learn more in the user guides:

@mattab mattab closed this Oct 31, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment