Show amount of total referrals

[adriaandotcom]

We got this request from @marcelhagedoorn

I'm tracking my monthly referrals (to track growth) but i have to add up and count all referrals.

[amritnagi]

I think it would look cleaner if you just put it at the bottom ?

[amritnagi]

Although thinking about it, should direct be included as a referral?

[adriaandotcom]

Nice, thanks!

Although thinking about it, should direct be included as a referral?

Hm, it's not really a referral, right? It's more like a source of traffic (direct, referrals)

[amritnagi]

Yeah that's true.

How about going super clean:

[adriaandotcom]

That is cool! Let me think about this. Only downside is that it also looks like a loader a bit.

[amritnagi]

Regular pie chart seemed a bit out of sync with the rest of the design!

[khrome83]

I like the donut chart, but I kind of like it is at the bottom and with the numbers always showing. If it was thicker, it would not appear as much like a loader... But that is a valid concern.

[amritnagi]

If the donut chart is preferred - perhaps change the loading animation??

I like the three dots personally (last one on 2nd row) https://github.com/loadingio/css-spinner/

[adriaandotcom]

Yeah, if we change the loading indicator it's better, I agree.

[khrome83]

Out of curiosity, since you know referrals, can you do a breakdown like this (in a donut chart maybe?)

1993 visits Referrals (25% total)

37% Social (Known social networks) 46% SEO (Known search engines) NN% Direct (no referrer)

OR something like that? it would offer some richer insights and may not be that hard if you had a small dictionary of referrers to flag as Social or SEO.

[adriaandotcom]

That's cool! Maybe we could use a toggle like this:

• 150 search
• 120 social
• 60 news.ycombinator.com

and when you click on search you get:

• 150 search
  • 130 google.com
  • 20 duckduckgo.com
• 120 social
• 60 news.ycombinator.com

with some kind of nice animation or something

[amritnagi]

An accordion might be perfect for this!

[khrome83]

Yeah, I don't think I hate that.

You may want to do an expander (no auto-closing the previously opened), just because some people may want to see all stats.

But I love the idea of grouping it. It makes sense to me.

This may be a bad idea, but since you are so "open". You may want to make the "seed" files to define social/search engines live in GitHub. Then people could do pull requests to update or add to them.

This would let you add other categories later as it made sense. Though the traditional search/social/direct/referral/email may be right.

Ohh email is another one that would be pretty easy. A lot of newsletters use substack or revue or something else that is identifiable.

[amritnagi]

Maybe something like this? https://codepen.io/abergin/pen/ihlDf

[khrome83]

pretty nice...

I would think a right-facing arrow that faces down when expanded might make more sense. The animation is a little glitchy/fast also.

[amritnagi]

Do you think it would be good to have grouping on the pages which uses a subfolder hierachy too?

Also wondering if it should be an option people can turn on and off in their settings?

[khrome83]

I would put the arrow on the front. The text below makes it look bad, but it may work better in a design?

What would you do for long URL schemas?

v (100) /components/ v (20) /components/base/ (5) /components/base/button/

(10) /components/base/avatar/ (5) /components/base/textfield/ (80) /components/marketing/

Just curious if this is helpful for people?

[amritnagi]

Yeah, i thought they would be better at the front too, but it was just a quick mockup.

The long urls get truncated at present, so I'd expect the same. I would probably drop the subfolder for the drop downs...

This is how i would do it: If grouped, have 3 dots after the path... and then hovering over it would give you the necessary marker

I'm 50-50 on it. I prefer it, as UI wise it looks way cleaner.
But it depends on how users want to interpret their stats. In my case, i have all the templates under the templates folder, so it would be nice for me to view them in order under there. (Other users may have their blog posts etc)

Some users may just want to see which pages are popular overall - perhaps those sites which do not have a lot of pages?

Hence suggesting if it would be useful as an option... or having a "group" button at the top/bottom - which lets you toggle between the two views?? Dunno, just thinking out aloud.

Also: another accordion option - a vue version , might be easier for Adriaan to include this https://codepen.io/dimaZubkov/pen/MzazgW