PanelbearPanelbear

Adding analytics to Vue.js apps

Panelbear is often used with Vue-based single-page apps. First, you'll need to add your site to Panelbear. You'll get a tracking snippet for your web app.

The tracking snippet is a small piece of code that runs on your website, and it collects the anonymous metrics which powers your dashboards.

There's two ways to integrate this snippet with your Vue app - let's take a look.

Steps

Just add the script shown in your Site Settings to your HTML document <head> section.

You can enable the option spaMode: 'history' to automatically track navigation changes on the client.

For example (don't forget to set your Site ID in both locations):

<!-- Panelbear -->
<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>

Tracking custom events

Panelbear will automatically track pageviews on navigation changes. But you can also trigger custom events for interactions or pretty much anything:

// Somewhere in your web app
panelbear("track", "NewsletterSignup")

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.

If you need help, you can reach out to us at support@panelbear.com.

Tip: Check out our local development guide for some tips and tricks when testing Panelbear on your machine.