Adding analytics to Sapper apps

Installing the analytics script to your Svelte Sapper project is super simple.

Once you have added your website to Panelbear, all that is left to do is integrate our analytics snippet. It's a small piece of code that runs on your website, and it collects the metrics necessary to show you the insights in the dashboard.

Install script

All you need to do is:

  1. Go to the settings page for the site.
  2. Copy the snippet shown in the Analytics.js snippet section.
  3. Paste the snippet on your website's base template.html file, preferably at the bottom of the <head> section.

Here's a basic example of what it might look like (don't forget to replace the two mentions of YOUR_SITE_ID with the your own Site ID):

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="theme-color" content="#333333">

	%sapper.base%

	<link rel="stylesheet" href="global.css">
	<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
	<link rel="icon" type="image/png" href="favicon.png">
	<link rel="apple-touch-icon" href="logo-192.png">

	<!-- Sapper creates a <script> tag containing `src/client.js`
	     and anything else it needs to hydrate the app and
	     initialise the router -->
	%sapper.scripts%

	<!-- Sapper generates a <style> tag containing critical CSS
	     for the current page. CSS for the rest of the app is
	     lazily loaded when it precaches secondary pages -->
	%sapper.styles%

	<!-- This contains the contents of the <svelte:head> component, if
	     the current page has one -->
	%sapper.head%

	<!-- Panelbear Analytics - We respect your privacy -->
	<script async src="https://cdn.panelbear.com/analytics.js?site=YOUR_SITE_ID"></script>
	<script>
		window.panelbear = window.panelbear || function() { (window.panelbear.q = window.panelbear.q || []).push(arguments); };
		panelbear('config', {
		    site: 'YOUR_SITE_ID',
		    spaMode: 'history',
		    debug: false,
		});
	</script>
</head>
<body>
	<!-- The application will be rendered inside this element,
	     because `src/client.js` references it -->
	<div id="sapper">%sapper.html%</div>
</body>
</html>

Check your installation

After you have added our analytics script to the HTML of your website, you should be able to see pageviews show up in the dashboard within a minute of the visitors coming into your website.

Testing your website locally? Check out our local development guide for some tips and tricks.

Mission complete!

Congratulations on completing the integration with Panelbear. That was easy, wasn't it? You now benefit of blazingly fast analytics, without compromising the privacy of your visitors.

Now all that's left to do is to let Panelbear do it's magic over time and you can view the insights in the dashboard.