NextJS advice for SSG/SSR and Google Analytics/cookies - reactjs

I have a NextJS site which is statically generated at build (SSG).
There are two things I need to implement next
Google Analytics
GDPR compliant opt-in cookie options
The first one is easy enough to do, however i'm struggling with making this GDPR compliant.
The issue is I don't have access to cookies at server side when my site is statically generated. This means that without knowing whether the user has consented to cookies at the server, I can't serve (or not serve) the analytics script along with the rest of the page.
Possible solutions:
Handle everything at client side - ask for consent, then dynamically add the GA tag to the <head>. However i'm worried this will negatively effect the analytics, or break it altogether. Does anyone know?
Change my site to be server-side rendered (SSR). I'd love to avoid this if possible. I'm really happy with how fast the site is running with SSG. It's essentially just a basic blog so would be a shame to have to convert for the sake of analytics.
Any other ideas?...
If anyone has experience with this, whether they used Next or Nuxt, etc, your input would be greatly appreciated!
Thanks in advance

Use Google Tag Manager to manage everything, your GA integration and your cookie integration using something like CookieHub for example (How to set up Google Analytics through Google Tag Manager for Next-Js?)
GTM will allow you to trigger the GA script only if the user specified he accepts analytics cookies.
Eitherway you could use Vercel.com built in analytics since your website is using Next.js wich is Vercel's framework.

Related

secure keys or sensitive data in angular2 nativescript

I am curious to know of available options, that a developer can use to secure sensitive information inside the mobile application. This is to prevent anyone from breaking the app and use keys for some nefarious purposes. Example of sensitive data includes passwords of APIs, which app can use seamlessly in the background to retrieve data.
Code obfuscation can help but cannot prevent from stealing the information;
Local storage options such as nativescript-couchbase or nativescript-secure-storage -if my understanding is correct- depends on feeding the information manually after installing the app. But the information needs to be available inside the app at the time of shipping.
OAuth is not an option as it requires the user to login in order to receive the tokens. JWT is neither an option, as the APIs are protected just using basic authentication.
I am using nativescript/angular2 but i would appreciate any generic simple yet effective ideas..
I think you are looking for obfuscation here, securing the information within your source code. By default {N} has uglify plugin configured within webpack, it gives the basic obfuscation.
There is Jscrambler support which is paid.
Also, speaking of Sqlite, there is commercial version of the plugin that supports encryptions but I haven't tried it personally. You may feed your data into it and pack your db at build time then install the db on first launch.

is it possible to use data from a website that i don't really have access to for my cordova/phonegap app

I'm in the process of making an app for my assessment at uni using cordova/phonegap and was just wondering if its possible for me to use data from a my unis ecom website for my app without having any back-end access to it, so like images/prices/descriptions...synced to my app?
yes it is certainly possible, because Cordova means working via Javascript and a HTML5 Rendering Engine. It is with some reservations entirely possible to load data from an webserver and use it in an App.
The only thing is to ask, whether it is also a smart-choice. If you want your app not to break when the data from the website gets changed (see https://en.wikipedia.org/wiki/Link_rot )
Also the server can somewhat prevent access of data from contextes outside of the webpage, especially if TSL/HTTPS connection is offered and content is only available after authentication.
Yet anyway its the magic of Javascript to be very good in doing things with web/online resources and displaying HTML5. Cordova and PHonegap is hence imo much better than the very challenging JAVA-Dalvik and IOs native programming that one would have to use else
Likely not,
Google and Apple frowns on using apps as wrappers for websites.
Quote Google Developer Program Policies - Spam and Placement in the Store
Do not post an app where the primary functionality is to:
Drive affiliate traffic to a website or
Provide a webview of a website not owned or administered by you (unless you have permission from the website owner/administrator to do so)
And
Quote Apple iTunes Guidelines - 2.12
Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected

Showing Google Analytics Data in real time

I would like to show number of visitors on a site since beginning of the month, number of users on the current day and currently on site.
I have Google Analytics installed, I tried to solve this issue with Embed API by enabling Google Analytics API from developer console - but I requires user authorization, etc.
What would be the easiest way to show analytics on-site without user authentication and accepting access by Embeded API, etc. Application is written in Angular, so Javascript API is the one I look for.
Thank you for any suggestion.
Authorization has to happen in order to get the data you want. Either you can let visitors to your site authorize themselves, or you'll have to authorize server-side on their behalf.
Once authorized, you can do something similar to what the Third Party Visualization Embed API demo shows. It uses a custom ActiveUsers Embed API component and includes the source code to show how it works.
Whether you use the ActiveUsers component or not, the basic gist is that once the users is authenticated via the Embed API, you have access to the method gapi.client.analytics.data.realtime.get, which you can use to query this data.
Here's where that happens in the source code for the ActiveUsers component:
https://github.com/googleanalytics/ga-dev-tools/blob/master/src/javascript/embed-api/components/active-users.js#L69-L87
Authentication with the Analytics service is mandatory. But the OAuth 2.0 Service Accounts (for Server to Server Applications) can be used to automate it in many cases.
It's unclear to me (from a quick scan) if the Auth options of the Embeed API would work with the automated authentication scheme, you may want to go through the details.
You should be able to use the Analytics Core Reporting API and maybe the Analytics Real Time Reporting API (beta) which work with the automated authentication according to their guides (look for the Authorisation sections on the left frames of the respective guides).
Donno if this qualifies as easy, tho, YMMV :)

Fetch as Google Webmaster tools

I have an AngularJS SPA site which I wanted to test using google's "Fetch as Google" feature in webmaster tools. I am a little confused about the results. The screenshot from Googlebot looks correct however the response doesn't include any of the contents inside the "ui-view" (ui-router)... can someone explain what is happening here? Is google indexing the site properly since the screenshot is correct? Or is google not able to execute the JS properly for indexing?
This is a mixed bag. From some tests I've seen the GoogleBot is able to index some of the AJAX fetched content in some cases. A safe bet though to make all the search engines happy is to use prerender.io or download their open source stuff (uses PhantomJS) to have your site be easily indexable. Basically what this does is saves the version of your site after async operations have completed for a given URL and then you setup a redirect on your server that points any of the potential bots for search engines over to the preprocessed page. It sounds pretty complicated but following the instructions on the site it's not too hard to setup, and if you don't want to pay for prerender.io to serve cached copies of your pages to search engines you can run the server component yourself too.

Web Analytics & Stats

We want to add tracking statistics to a web application we are building but are pretty unsure of how to go about it. (i.e. clicks, pageviews, unique visits etc)
Does anyone have any articles on the best way to go about incorporating tracking data into an application ? i.e. javascript tracking or IIS etc ?
We want to add tracking in as a ASP.NET MVC module - but we are unsure as to the best way to actually get the data and essentially 'track' this information ?
If anyone could help out - much appreciated.
Edit: just to be clear, we want to do this in-house and present the stats to our users as an additional fee module?
You can turn on the logging for IIS and then use the SQL Server Report Server Pack for IIS. It comes with many canned reports for your sites stats and then you could take it from there with your own custom reports.
You could also just use log parser to get the stats into a SQL Server DB and then you could use SQL from their to analyse and roll your own app.
Either way, you could modularize this and sell it as an add-on to your customer base.
You could use Piwik, you just need PHP version 5.1.3 or greater and MySQL version 4.1 or greater. As they say in their website, "Piwik aims to be an open source alternative to Google Analytics."
They have a demo on the official website so you can see if it's what you're looking for.
Google analytics is a popular service. You just insert a bit of javascript on every page that contains your sites name and Google tracks the data and provides all the report on a handy web based dashboard.
It's not an ASP.net MVC module like what you mentioned, but it will certain track stats for you and will be a lot simpler to set up than trying to code or integrate anything yourselves.
I'd look at analytics to begin with and only branch out to something more complex if it doesn't meet your requirements.
klabranche provided a holistic answer in terms of using logs of web server. I think using web server log is a a great way to analyse data of your web application.
That being said, depend on your web application and the scope of your analytics, just relay on web server log is not a good way to.
As you may know, web log does not record users behaviors like clicking certain tabs which may not trigger a web server request. Obviously your web log has no idea whether users clicked that tab or not, this may hurt your analyse.
Another you need to know is browser cache, this may create another black hole in your data.
RECAP
If you want to do a holistic analytics, you need to use two approaches, one is JavaScrip tag, another one is web log. Since both of them have shortages, combining them together will give you a complete picture.
Hope this helps

Resources