Setting up GA4 in Svelte

If you are a developer of Svelte, here is the basic instructions for setting up UA4 in your Svelte project.

  1. Create your GA4 account and create a new GA4 property for your website. You can find the walkthrough here.
  2. In your Svelte project, find the main layout or entry file where you want to add the GA4 tracking code. This is typically the file that defines the overall structure of your app.
  3. Open your terminal or command prompt and navigate to your Svelte project’s directory.
  4. To simplify the integration process, we’ll use a package called svelte-google-analytics. This package makes it easy to add GA4 tracking to your Svelte project. Install it by running the following command in your project directory:
    npm install --save-dev svelte-google-analytics
  5. Now, open the main layout or entry file of your Svelte project. This file is typically named App.svelte.
  6. At the top of the file, import the GoogleAnalytics component from the svelte-google-analytics package:
    import { GoogleAnalytics } from 'svelte-google-analytics';
  7. In the Svelte template section of your file, add the <GoogleAnalytics> component. Replace 'YOUR_MEASUREMENT_ID' with the Measurement ID you obtained from your GA4 property:
    <script> import { GoogleAnalytics } from ‘svelte-google-analytics’; </script> <GoogleAnalytics measurementId=”YOUR_MEASUREMENT_ID” />
  8. Save the changes to your file.
  9. Now, build and run your Svelte project as you normally would, either in development or production mode.

With these steps, the svelte-google-analytics package will automatically inject the necessary GA4 tracking code into your Svelte project. It will track user interactions and pageviews, sending the data to your GA4 property.

Remember to replace 'YOUR_MEASUREMENT_ID' in the <GoogleAnalytics> component with the Measurement ID specific to your GA4 property.

Sample Code

Open a Svelte component file where you have a button that you want to track. Add the following code to import the trackEvent function from the svelte-google-analytics package:
import { trackEvent } from 'svelte-google-analytics';

Inside the component’s logic or methods section, create a function to handle the button click event:

function handleButtonClick() {
  // Track the button click event
  trackEvent({
    eventName: 'Button Click',
    eventCategory: 'User Interaction',
    eventLabel: 'Submit Button',
  });

  // Add your additional logic or actions here
}


In your component’s template, bind the handleButtonClick function to the button’s onclick event:

<button on:click={handleButtonClick}>Submit</button>


Save the changes to your file.

Now, when the button is clicked, the handleButtonClick function will be triggered. Inside this function, we use the trackEvent function to send a custom event to GA4. In this example, we are tracking a button click event with the event name, category, and label specified.

You can modify the eventName, eventCategory, and eventLabel parameters to fit your specific tracking needs. For example, you can track different types of user interactions, form submissions, navigation events, or any other custom events relevant to your application.