SiteBehaviour

https://docs.sitebehaviour.com/
Admin
SiteBehaviour is a lightweight, privacy-focused analytics alternative to Google Analytics designed...
Tokens:7,511
Snippets:146
Trust Score:7.5
Update:6 months ago
Show doc for...
Tokens:
Raw
### Track 'Add To Cart' Event with SiteBehaviour

Source: https://docs.sitebehaviour.com/get-started/custom-events

Example of sending an 'Add To Cart' custom event. This snippet should be triggered when a user performs the 'add to cart' action.

```javascript
window.sbVisitorCustomEvent("Add To Cart");
```

--------------------------------

### Add SiteBehaviour Script to React's index.html

Source: https://docs.sitebehaviour.com/guides-and-integrations/react

Paste the SiteBehaviour tracking script into the `public/index.html` file before the closing `</head>` tag. Ensure the script is correctly placed to enable website tracking.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Other head content -->
    <script>
        // Your web analytics script here
    </script>
</head>
<body>
    <div id="root"></div>
</body>
</html>
```

--------------------------------

### Insert Tracking Script in index.html

Source: https://docs.sitebehaviour.com/guides-and-integrations/vuejs

Place the tracking script within the head section of the public/index.html file to ensure it loads correctly.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>YourVueApp</title>
    <!-- Other head content -->
    <script>
        // Your sitebehaviour tracking script here
    </script>
</head>
<body>
    <noscript>
        <strong>We're sorry but YourVueApp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
</html>
```

--------------------------------

### Import Head Component in Next.js

Source: https://docs.sitebehaviour.com/guides-and-integrations/nextjs

Import the `Head` component from `next/head` to manage the document head in your Next.js application.

```javascript
import Head from 'next/head';
```

--------------------------------

### Add SiteBehaviour Script to Angular index.html

Source: https://docs.sitebehaviour.com/guides-and-integrations/angular

Paste the SiteBehaviour tracking script into the index.html file of your Angular project, before the closing </head> tag. Ensure the script is correctly placed to enable tracking.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>YourAngularApp</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- Other head content -->
    <script>
        // Your sitebehaviour tracking script here
    </script>
</head>
<body>
    <app-root></app-root>
</body>
</html>

```

--------------------------------

### Implement Button Click Event Tracking

Source: https://docs.sitebehaviour.com/get-started/custom-events

This JavaScript code attaches an event listener to a button. When the button is clicked, it triggers the 'Add To Cart' custom event via SiteBehaviour.

```javascript
document.getElementById("addToCartButton").addEventListener("click", function() {
   window.sbVisitorCustomEvent("Add To Cart");
});
```

--------------------------------

### Add SiteBehaviour Script to Next.js App

Source: https://docs.sitebehaviour.com/guides-and-integrations/nextjs

Integrate the SiteBehaviour tracking script within the `Head` component of your Next.js application's custom App component (`_app.js` or `_app.tsx`). Ensure the script is placed correctly to be included on all pages.

```javascript
// _app.js
import Head from 'next/head';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Head>
                <script>
                    {`
                        // Your sitebehaviour tracking script here
                    `}
                </script>
            </Head>
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;
```

--------------------------------

### Send a Custom Event with SiteBehaviour

Source: https://docs.sitebehaviour.com/get-started/custom-events

Use this JavaScript function to send a custom event to SiteBehaviour. Replace 'Event Name' with the desired event identifier.

```javascript
window.sbVisitorCustomEvent("Event Name");
```
Tokens:
Raw