Google Analytics

Google Analytics is a service which can be dropped on a site to give you more insights about your visitors. Socialstack has some convenience mechanisms to get you started quickly and also to help you be fully compliant with global privacy laws.

First, you'll need to setup an account on Google Analytics. Doing this will give you a measurement ID which you'll need to drop in to the configuration of your site to get it communicating with Google Analytics. GA wants it to be at the start of the head tag of your site so specifically that means it goes in the HtmlService config and in "StartHeadScripts". Note that MEASUREMENT_ID_HERE is present twice:

"StartHeadScripts":[
{
"type": "text/javascript",
"src": "https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID_HERE",
"async": true
},
{
"type": "text/javascript",
"content": "window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'MEASUREMENT_ID_HERE');"
}
]

At this point with the config saved, your site should be communicating with Google Analytics. It is not yet compliant with global laws though so do continue reading on for more about that to see if it is relevant to you.

Future note: The configuration for Google Analytics along with handling the cookie banner below may end up being unified in the installable Api/GoogleAnalytics. The above, however, will always work provided Google still supports it of course.

Page views

To get all page views sent to Google Analytics, install the page load event handler:

socialstack i UI/Functions/GaPageChange

This module simply needs to exist in your project for the event to be handled. Because many page changes on a Socialstack site don't result in the entire page being loaded, this module makes sure all of the faster page changes are captured too.

Global privacy laws

Because you're adding third party tracking to your site, you'll need to add a cookie prompt and slightly edit the previous config if you want the site to be compliant with EU, UK and California law. A simple built in cookie prompt is available under the following module:

socialstack i UI/CookieConsent

You should then use this <CookieConsent> module by dropping it in the footer of your site, such that it is rendered on the frontend. It defaults to describing the contents of a Socialstack site as well as Google Analytics. Once it's added to the site, you'll need to ensure that Google Analytics honours the request of the user from this UI. That results in the config looking like this:

"StartHeadScripts":[
{
"type": "text/javascript",
"src": "https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID_HERE",
"async": true
},
{
"type": "text/javascript",
"content": "window.cookieLayer=window.cookieLayer||[];window.cookieLayer.push((s)=>{if(s.all){window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'MEASUREMENT_ID_HERE');}})"
}
]

The above config will mean if the user accepts all cookies on the prompt then Google Analytics will be activated.