Kirby Analytics Dashboard


#1

Kirby Analytics Dashboard is a Kirby plugin which extends your dashboard with some Google Analytics statistics and reports. It does not emulate Google Analytics itself but provides a nice and simple overview about how your site is doing.

Please Note: It does not add or handle your Google Analytics Tracking code.

Screenshot

visitors-widget-screenshot

Widgets

Currently there is only one widget available, so please be patient. I’ll add some more within the next weeks.

Installation

Please read the Readme carefully. Sadly it’s not as obvious as it should be to setup the plugin correctly. Feel free to open a new Github Issue if you have any trouble. I’ll help as much as I can!

Limitations

This plugin depends mostly on modern Javascript, it’s testet in most modern browsers and does not use any kind of Polyfills. I’ll try improve the browser compatibility in the next releases.

Feedback

Any kind of feedback is very much appreciated. Please create a new Github Issue for feature requests or bug reports.


#2

I’m trying to install the plugin but I’m stuck at the “Getting a Google View ID” part. On the google page, “account explorer” is still loading and I can not see the rest. As on this thread, I tried to remove my caches, on safari / firefox / chrome, the page is still loading …and I can’t find my ID


#3

@Oziris,

as this is a Google Page, there is nothing I can do right now. But you could try an alternative approach to retrieve the View ID: Login to Google Analytics and follow these instructions: https://www.youtube.com/watch?v=x1MljgyLeRM

Copy the View ID and simply add the ga:prefix.


#4

Did that worked out for you @Oziris?


#5

Thanks for the trick, I could found my View ID, but the installation doesn’t work…But it’s a real mess between all these google pages/interfaces/dash board/…I have to relax and begin to the start :slight_smile:

Maybe it doesnt work because google does’t want “/” into the Authorized JavaScript origins URL to provide. Although it does not work on my local server either


#6

Yeah, that is a quite complex task :frowning:

There is currently an issue (depending on how do you got the code). It’s currently not possible to make use of a submodule even if you download the source code from the repository directly. Could you please try the pre-build release before you start over?

I’ll push a fix to master later the day!


#7

I tried and it doesn’t change anything. Maybe I’m wrong somewhere, I can’t say. Locally, and on server, I just see the header of the widget ‘Besucher’, and nothing below. I thought it could be some plugins interferences, but removing my other plugins is not resolving the problem…
Just in case : I have call my folder kirby-analytics-dashboard in site/plugins/. Do I have to rename it ?


#8

The folder name is fine as you are able to see the widget on your Dashboard. :slight_smile: I’m pretty sure there are no interferences with other plugins.

It looks like there is something wrong with the plugin javascript or maybe your google configuration.

  1. Which operating system and browser are you using?
  2. Are there any errors in the console? (Please open your browsers developer tools and look for errors)
  3. What is your local url? (eg. http://localhost or http://localhost:8080 )

This is how your Google API Dashboard should look like:


#9

I’m running on MAMP and Firefox. My local is http://localhost:8888 but the Authorized JavaScript origins URL don’t allow me to write http://localhost:8888, just http://localhost

This is a capture from console (from panel)

And from google dashbord


#10

You’re allowed to add a port in authorized JavaScript origins.

56

The JS error seems that it has nothing to do with the plugin JS. But a JS Error (thrown elsewhere) could prevent other scripts to be executed further. Where does SyntaxError: missing } after function body come from?

Could you try another browser? And I would also recommend to disable (temporarily) all browser extensions.

We need to track down what happens here. I tried a fresh Kirby installation and the latest Plugin release and everything works as expected.


#11

Sorry ! I made two mistakes. We can effectively add localhost:8888 and I didn’t rememeber I had Grossery and U-block in my firefox…grrr
So I opened Chrome, I could see a “connect with your google accout”, and then I see now :

In safari, this is what I get

PS: the SyntaxError come from a color field plugin. I tried to remove all my plugins…


#12

Okay, cool. One step further :slight_smile:

This is an error thrown by the Plugin but I’ve no idea where it comes from. It looks like it could not iterate about something it needs to iterate. Does your analytics account contain any data?

What the developer error console say?


#13

My analytics is updating normally now

I found a weird bug in my htacces with allow, self-allow. I replaced it with the original kirby htaccess. Doesn’t change anything. Let me try with a basic kirby, maybe I’ll find the problem by this way


#14

Got it! I’am able to reproduce this issue. It is thrown if your Google Analytics Account does not contain any data :slight_smile:

Is your Analytics already tracking data? What is your expected behavior in such cases?

Your screenshot is looking promising. It says to me that you’re an authenticated user and a communication channel was established successfully. That is good news!


#15

Well, yes I don’t have any data on Google Analytics

I don’t know what to expect, I’m just a bit lost :slight_smile:
Do I have to wait 24 hours, like google said usually ? Is it that ?


#16

I think I’ll add a readable error message.

Google needs some time to gather data. I think you will get some results tomorrow :smile: Let me know!

Could you please summarize your issues for me? Where you got stuck or what was not obvious for you during the installation and configuration process. I would love to improve the README with your feedback!


#17

No problem, I’ll let you know.

Humm, well during the installation, I followed every steps of your documentation. My first problem was I didn’t find the correct Google view ID, but you find a solution that is to pass by Google Analytics > Administration > View settings.
After that, I think I didn’t add the correct “Authorized JavaScript origins URL”, because mine is http://localhost:8888 so I have set it like that.
Next problem was my modules in Firefox : Gosterry and U-block are blocking every google analytics requests. After that, I suspected my htaccess to be wrong with a ‘self allow’ property (But I can’t confirm that). And finally, the error message "Cannot read property ‘map’ of undefined’, wich is ‘e is undefined’ in Firefox…

By the way, I had fun designing the button. I think this look more friendly that yours, and it is corresponding much more to the panel design.

Simply added that to the assets/css/google-buttons.css

.google-auth {
    color: #000;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 500;
    opacity: 1;
    font-family: "Source Sans Pro", "Apple LiGothic Medium", "Microsoft JhengHei UI", "Helvetica Neue", Arial, sans-serif;
    display: inline-block;
    padding-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    outline: 0;
    cursor: pointer;
    background: rgb(239, 239, 239);
    border: 2px solid rgb(221, 221, 221);width:100%;
    text-align: left;
    margin-bottom:8px
}
.google-auth:before {
    content: "";
    background-image: url(../images/btn_google_dark_normal.svg);
    background-repeat: no-repeat;
    background-size:50% 50%;
    background-position: 50%;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;border-right:2px solid rgb(221, 221, 221);
    border-radius: 1px;
    margin-right: 8px
}

With this icon. But I couldn’t change the “Sign in with google” text. It must be done with some JS apparently…


#18

Thank you! I’ll try to add your feedback…

The Button-Text is currently hard coded as the button is generated dynamically. That, and all other Strings are getting localized in a further release.

I like your button design very much! It does match the Kirby-Style much much better. I really appreciate your effort!
But as this Plugin is publicly available I decided to follow the Sign-In Branding Guidelines.

Thanks again for your Feedback!


#19

Well, my fault, it wasn’t so hard to customize the text with :after, my final code is

.google-auth {
    color: #000;
    vertical-align: middle;
    font-size: 16px;
    font-weight: 500;
    opacity: 1;
    font-family: "Source Sans Pro", "Apple LiGothic Medium", "Microsoft JhengHei UI", "Helvetica Neue", Arial, sans-serif;
    display: inline-block;
    padding-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    outline: 0;
    cursor: pointer;
    background: rgb(239, 239, 239);
    border: 2px solid rgb(221, 221, 221);width:100%;
    text-align: left;
    margin-bottom:8px;position:relative
}

.google-auth:before {
    content: "";
    background-image: url(../images/btn_google_dark_normal.svg);
    background-repeat: no-repeat;
    background-size:50% 50%;
    background-position: 50%;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;border-right:2px solid rgb(221, 221, 221);
    margin-right: 8px
}
.google-auth:after {
    content: "Se connecter avec Google";
    position:absolute;
    left:40px;
    width: 100%;
    background: rgb(239, 239, 239);
    line-height:40px;
    height: 40px;
    padding: 0 8px
}

I’m waiting for google datas and I’ll tell you.


#20

I just released version 1.0.2 which adds localisations and a improved documentation.