Setup google analytics 4 with Sveltekit ^1.0
Since Google Analytics introduced GA 4, there is many changes in the basic setup of a Google project, They have introduced the concept of properties and streams to differentiate between different parts of the application which is far superior to the universal one.
Today, I will be explaining the code for integrating of google analytics 4 with Sveltekit 1.0 + which has folder-based routing. The blog does not cover setting up a project and getting the integration script from the analytics console. There are many resources that will help you get it done.
Approach
Let me explain the basic approach first, In the parent +layout.svelte, we will be adding our script for google analytics that we get from the dashboard. For this, we will simply create a component and include that component in our layout file.
Then we will be creating a store for storing all the events and will just subscribe to that store in the component and send the event to the google analytics platform.
On whichever page(+page.svelte) we want to add events, we will just add the event data to the store and due to subscription, the store will execute that event. Think of something like a queue.
One thing to note is that we can not send data from our +layout.ts or +page.ts directly to analytics as the GA script will not be initialized in these ts files. Though we can send data if the user changes route from within the application but on refresh we can not send data
Code
As the approach, we will first be creating a Analytics.svelte file and the code of this file is:
In the above file, we are adding the script tag in svelte:head tag so that it gets attached to <head> tag in HTML on render. I will be explaining the analyticsStore subscription code after I explain how we will be adding data to the store.
In the above code, we are just creating a store and assigning an empty array as the initial value
In the +layout.svelte file, we are just importing and calling the Analytics component
In any +page.svelte file, add the following code
This will add a new event object to the store and the event will be sent to the google analytics platform.
Now as we have seen the addition of data to analyticsStore(basically updating the store). Let’s get back and understand what we were doing while subscribing to the store
Let’s go line by line,
2. I am just subscribing to the store, In Sveltekit when you subscribe to a store, you get notified when anything in it gets changed, We will take advantage of this.
3. We are just considering that the value we get as a part of the queue(natively array for us). In the variable named next we are adding the first value of the array that is present in the updated store (There can be multiple events at once that are pushed to the store. It is important to send all the events in the same order)
4. retries is a variable that keeps track of retry for the current transaction i.e. a current event that is failed
5. We are checking if the data is correct or not i.e. it has id, event, data to send and type of event to be sent. If anything is missing we will just replace the value of the next variable and continue from the while loop.
18. We are checking whether the previous id value is the same as the current one or not. If not then we will increase the retries to again 3.
20. Then we are assigning the previous id variable to the current id
25. We are checking whether gtag is available or not i.e. script has been loaded or not
29–31. We are checking if the retries are greater than 0 then reduce the retries and again run the while loop for the same item/event.
36. We are updating the next variable to hold the next value in the array.
Note: This is not the best approach and it can be improved further by adding time-based retries.
If you have any issues or want to ask anything, do comment below and If you like the blog, don’t forget to hit the clap icon.
