I'm building a website where users can create new pages with dynamic URLs. I would like to add traffic analytics for each of these pages individually and allow users to view a dashboard of the data collected for the page they have created (just view, they shouldn't be able to edit the dashboard they are given). This should also be automated so that when a new user registers and creates their own page, this is tracked automatically.
If possible, this should work in Vue.js, but anything that works with vanilla JS should be fine too.
Is this possible with a tool like Google Analytics or a similar alternative? Is this expensive?
Most of the Web applications now a days are single page apps or Client side web applications. This means most of the analytics platforms like GA etc will work with your web application.
However, You will need to implement the analytics in a specific way for you to capture the required metrics. I think using Google Tag manager and creating a DataLayer will make it easier in the long run. Once the datalayer is available you can use this data with any analytics tool.
In order to track a screenview change, you can use any custom trigger available with your application that notifies of the screen view change or you can use the History change as mentioned here: Google Tag Manager and Single Page apps.
You can also use the App Rote changes as mentioned here on simple routing to populate the datalayer and use the values from the datalayer in any analytics including the GA.
Other option is using vue-analytics . There is Easy to follow documentation from the author and the branch is here
This way any new pages added etc will be tracked automatically.
Hope this helps.
Legal context
Well... What is the targeted audience? If your main targets are privacy advocates or European people covered by the General Data Protection Regulation (GDPR), it would be a terrible idea to select Google Analytics as the solution. In France, for instance, we have a National Commission on Informatics and Liberty ("CNIL" in French). It is:
an independent French administrative regulatory body whose mission is
to ensure that data privacy law is applied to the collection, storage,
and use of personal data. (Source: Wikipedia)
The CNIL tends to strongly discourage the use of Google Analytics (see Q&A on the CNIL's formal notices concerning the use of Google Analytics). Therefore, be very careful about that, especially if you are targeting an international audience.
Recommended tool
When it comes to web analytics, you have a wide range of technical solutions. For obvious reasons, I will not put the complete list here, but I can give you a tool that I know and use: Matomo.
This one is recommended by the CNIL, it is open source (see GitHub) and GDPR-compliant. You can self-host Matomo (On-Premise), which is completely free. You only pay if you use Matomo Cloud.
Matomo has a technical website dedicated to developers and exposes an API which should allow you to do what you want. Doing some research, I even found a thread on the official forum where the OP seems to have a similar problem to yours. Since it is a requirement in your question, you can also find information about user permissions.
On this page, you can read that Matomo developers use Vue for the front-end code. There is also a plugin called vue-matomo, which may be useful in your project.
Finally, to track single-page applications (SPAs), read on: Single-Page Application/Progressive Web App Tracking: Integrate - Matomo Analytics (formerly Piwik Analytics) - Developer Docs - v5
As I read from this source-
If you have a website that has dynamic content or multiple pages
and steps under one URL (or an all-flash website), you have to do a
little more work to get Google Analytics to effectively track your
pages.
Here are some more references you can check upon-
Here you can read, how Google Analytics works.
Here you can find its pricing plans which are free for small businesses.
Here you can read how Google Analytics performs for dynamic links.
Here is another answer given by #Ruslan Konygin on a similar problem.
Here is a complete guide on Tracking Dynamic Sites and Pages with Google Analytics.
Related
I created a web application for a family business using react.js a few months ago but the website is only accessible by people who know the exact URL. It is using a firebase backend and a React.JS frontend.
I've used the google crawler checker and it returns normal saying that the crawlers are able to access the website with a screenshot of the page. However, it is not indexed on google search results.
I've read about how SSR is a possible solution to this using Next.JS.. but not really sure what it means. How can i get the website to show towards the top of the search results when the business name is searched in google? Should I use Next.JS over React.JS for something like this?
Welcome to the massive world of Search Engine Optimization.
There are many, infinite ways, to get your website to the top of the rankings on Google. To name a few:
Readable domain, look up how to put your website behind jtsapebusiness.com instead of weird-animal-123.firebase.etc.io.
Serving certain files like robot.txt that Google specifically searches for
Having Meta Tags
Having specific Meta Tags for each page (Next JS is great for this)
Render Time (Server Side Rendering is also great for this, but if your "React" app is small enough the performance difference shouldn't really matter to be honest.)
Page accessibility, Google can scrape single page apps a lot better than it used to, but serving up each page individually via Sever Side Rendering has a lot of perks.
How often your page is searched and clicked on (tell your friends and family to search you on google and click on your website)
These are just a few! Reading more about Search Engine Optimization will help you come up with even more questions. When and if you do switch to Next.js, you will still be using React. You will just be writing it a little differently to fit a more server side pattern.
It will not matter much if you choose to pick between "React or Next". If you wanted to maximize your chances of ranking higher, then I would go with Next. But I wouldn't want you to pickup a whole new technology if you already have the React App built. Instead you would just need to add some Search Engine Optimization sprinkles on top (some examples listed above).
I work on a web application which uses cloud storage as the primary save mechanism for users. We don't have our own cloud storage service, instead we leverage the REST APIs for Google Drive, Dropbox, etc.
Recently we have noticed an increasingly number of users in China, unfortunately none of the cloud services we currently integrate with are available in China. The alternative forms of saving in the app have limitations which cannot be resolved, and developing our own cloud storage system that functions in China would be a very large engineering undertaking.
As such I have been trying to find a service which we could add that works in China, but have had very little success. Nearly all of the sites are in Chinese, and even with Google Translate I haven't been able to find any company that claims to offer these services. Most have some form of Cloud storage for users, but I haven't been able to find a REST API that would allow us to integrate with them. Any leads someone could provide would be much appreciated.
Requirements:
HTTP API that can be used from the browser similar to Dropbox HTTP documentation
Can be accessed in the UK ( for development ) and China
Preferably some documentation in English...
Ideally free and commonly used in China
I have implemented client-side code to work with Chinese storage cloud services (REST API). However this already dates back quite some time. Basically, there is often no English documentation and sadly you have to rely on translation. Also I suggest using a VPN (if that helps) because accessing these services outside from China is often terrible slow. This is also valid for most of the developer docs.
What direction I can point to is Baidu PCS (sadly all links are 404 so take a look here) which still exist. But as the biggest player this is the first thing I would try. There are probably other providers but the question is how long they will exist because others I have implemented are already gone (e.g. Kanbox).
This is just my experience and it might not fully apply today but maybe it helps.
Update 1: What I also found in a quick search is Weiyun which has a reverse engineered API but yeah that's far from reliable and official supported, but worth a look.
Update 2: Added alternative link for Baidu PCS documentation.
In my current job I have to import an analytics framework into our clients pages (we're a 3rd party also, our services are provided by including our tag in the client's pages) for counting basic metrics such as: Visitors,Visits,Views,Avg. Visit duration,Bounce Rate,Pages/Visit .
I've looked at several opensource solution such as piwik etc.. but as we handle allot of traffic this will come at a pretty hefty price, so obviously GA seems like the most reasonable solution for us. the problem is that the bulk of my clients already have GA on their pages and everybody has a different version of it (analytics.js,ga.js,dc.js etc..) where each version has a different method of working with multiple trackers on page and some don't support that all together. so using a pixel reporting technique seems like the safest method to use here but .. I can't find any documentation on google or anywhere else for that matter explaining what functionality I will loose when using this approach.
The API documentation does a decent job of showing me how to do it myself and there's also nojsstats (which i prefer not to use) but has anyone had any experience with this kind of a scenario and can eloborate on what functionality will be lost as a result of this approach? or has found a different solution for this kind of problem?
Thanks in advance,
Amnon
You can look into the parameter reference for the measurement protocol - that's what you can get, provided you pass all the parameters (so everything that's not in there you lose, most notably all Geo information which will be set to the location of your server).
The biggest challenge would be that you'd have to maintain a session id in your respective clients applications, else you'll only register single page visits with 100% bounce rate (since Google will not know which visits belong to the same user). That seems a lot more cumbersome than additional javascript trackers.
However since they already have Google Analytics you do not need to implement any tracker at all, you can query the existing accounts via a serverside language of your choice (or via Google Apps Script). Which is actually what the documentation you've linked to describes (Core reporting API is not about collecting data, but about querying existing data).
I was wondering if there was an adapter library for Javascript to make integrating tools like Google Analytics, Kissmetrics, mixpanel, Chartbeat, gaug.es, etc easier. Something like SLF4J, but for event tracking. We are evaluating different tools, and it seems like it would be useful if it was possible to quickly swap between them.
We recently built analytics.js to solve this problem. It's a javascript wrapper library for Google Analytics, KISSmetrics, Mixpanel, Gauges, Chartbeat, GoSquared, and 16 other services.
The library does pretty much everything you mentioned:
Loads all the javascript snippets asynchronously
Abstracts the event-views and other API methods across all the libraries
And exposes each service's global object in case you need to do something custom
You can check out the open source library on Github: http://segmentio.github.com/analytics.js
Or for an easier solution that also supports the same abstraction on the server-side for Python, Ruby, Node, Java and .NET, check out https://segment.io
It turns out there is a library that does much of what I was looking for, known as Gatling.
It greatly simplifies tracking multiple analytics libraries at once, all asynchronously. In addition, you can even expose your GA 'gat' object for triggering page views and events manually.
It doesn't seem to use the Google Analytics 'gaq' object, and it doesn't abstract event-views across multiple libraries, which I think would be useful features, but it is pretty close to what I was looking for.
This area is sometimes called "Universal Tag" or "Tag Management" - the last time I looked there was a handful of big-ticket vendors, like Tealium, BrightTag & Tagman, but not much in the open source world.
In mid-2011, QuiBit (qubitproducts.com) launched their open-source OpenTag, but this seems to be an open/closed play, where the on-page javascript is open-source, but it is powered by their proprietary management system which does the tag injection - while they don't display terms & pricing on their site, I seem to recall they had a sizeable no-contract, no-pay starting band, which maybe you could use while you work out which solution(s) is best, then embed them directly before production ramps up to the paying levels of traffic.
I'm not sure there could be such a standard container, because every site has very specific needs in term of tracking (since features and usage are often unique).
But you could do the following:
design precisely the data model of what you want to track and build JavaScript objects or an API exposing it to the tracking code
design event handlers for every interaction / transaction you want to track
use a sort of plug-in system to map each tracking action to the core language of each tracking provider
I own a football community website (with RESTful web services available) written in Grails and I would like to develop an embeddable widget to be distributed into other websites or blogs.
My requirements:
This widget (written in javascript/HTML rather than Flash since I don't know Flash) will display the latest articles of my website (easy...since I have RSS feeds available).
However, the most difficult part consists in having remote users to make predictions or give a rate to football games directly from the widget itself.
Two modes are supported : anonymous user or user-authenticated (user account located and managed on my website).
Statistics from user actions of the client website (i.e. the website embedding the widget) will also be reported inside the widget.
My solution:
Here you go! Where do I start? Do you advise me to go with online widget creation tools like Widgetbox, KickApps, Widgadget, Grazz or any other ones you like? If yes, which one is the easiest to use and enough flexible to fit my requirements ?
Or is there another simpler solution like a Grails plugin?
Thanks for your help.
For something similar I have used Google Gadgets, which are very simple to create because you can use javascript with the API Google provides.
I wrote this post in my blog http://maricel-tech.blogspot.com/2008/11/how-to-create-google-gadget.html on how to create a google gadget that displays the news from CNN, it is a little outdated since Google changed their APIs, however the logic is the same you would just need to change the google method calls to use the new ones.
The example in the post reads the RSS feeds from CNN news and displays as a list the title and description of each article, in your case you would need to add some more logic to add the extra functionality you need, but I think you can find what you need in the Google API for gadgets.