Giter Club home page Giter Club logo

sapper-google-analytics's Introduction

Google Analytics tracking for Sapper-based apps

It's not enough to just add Analytics code for SPA sites, as it doesn't track client-side navigation. So we have to pass navigation events manually and this component does exactly this.

Setup

Install the component:

npm i sapper-google-analytics

And add it to your src/routes/_layout.svelte:

<GoogleAnalytics {stores} id={ga_measurment_id}/>

<script>
    import GoogleAnalytics from "sapper-google-analytics/GoogleAnalytics.svelte"
    import { stores } from "@sapper/app"

    let ga_measurment_id = "UA-SOMETHING"  // your analytics id
</script>

sapper-google-analytics's People

Contributors

begonaalvarezd avatar imbolc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

sapper-google-analytics's Issues

Analytics javascript bundle loads twice on exported website

It seems that on an exported website the analytics javascript bundle loads twice. I'm assuming this is because it loads the SSR version first, then again the client version. Would it make more sense to ignore the SSR version of analytics and only load the bundle on onMount()?

2 Page views upon landing/refresh

Hi, first of all thank you very much for this code, very helpful ๐Ÿ™

I have realized that somehow google analytics fires a page view when you land on a website (or refresh) and also this package fires one, hence there are 2 page views registered when there should be only one. This issue confuses the bounce rate quite substantially.

Any idea how to prevent this double trigger?
Thanks :)

Disable localhost from being tracked

Hi, thanks for sharing your work!

I was trying to disable GA from tracking localhost with no luck, here is my code

onMount(async () => {
	if ($page.host.split(':')[0] == 'localhost') { 
	console.log(window)
		window['ga-disable-G-XXXXXXXXX'] = true; // enter your tracking ID
		console.log('disabled GA for localhost!')
	}
});

let ga_measurment_id = "G-XXXXXXXXX"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.