Skip to content

Commit

Permalink
add general
Browse files Browse the repository at this point in the history
  • Loading branch information
gernest committed Nov 14, 2024
1 parent c2a2d39 commit 01c2ab4
Show file tree
Hide file tree
Showing 7 changed files with 442 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/content/post/goals-custom-event.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Please change the file name in the `src` attribute of your vince snippet from `s
<script defer data-domain="yourdomain.com" src="http://localhost:8080/js/script.tagged-events.js"></script>
```

> If you're using outbound link clicks, file downloads or any of our other script extensions, you can [combine them](script-extensions.md#you-can-combine-extensions-according-to-your-needs) by changing the `src` attribute in the snippet. If you want to track custom events and outbound link clicks simultaneously, change the script name to `script.tagged-events.outbound-links.js`.
> If you're using outbound link clicks, file downloads or any of our other script extensions, you can [combine them](/website-script-extensions#you-can-combine-extensions-according-to-your-needs) by changing the `src` attribute in the snippet. If you want to track custom events and outbound link clicks simultaneously, change the script name to `script.tagged-events.outbound-links.js`.
## 2. Add a CSS class name to the element you want to track on your site

Expand Down
146 changes: 146 additions & 0 deletions src/content/post/website-custom-location.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
---
title: Specify a custom location to aggregate pages that contain id
category: Guides
tags:
- sites
---

By default, Vince tracks pages using their complete URLs as they are on your website. In some cases, you might want to provide Vince with a custom URL to use instead of the actual URL of a page.

This is especially helpful to redact and aggregate multiple pages whose URLs contain identifiers, personally identifiable information (PII) and other universally unique identifiers (UUID) specific to users. This is helpful both from the privacy and analytics perspective.

Follow the steps below to learn how you can specify a custom location for your pages and aggregate page URLs that contain identifiers:

## 1. Add the `manual` script extension
To specify a custom location for your event, you must use [Vince's manual script extension](/website-script-extensions#scriptmanualjs).

To do so, change your Vince script snippet `src` attribute from `https://localhost:8080/js/script.js` to `https://localhost:8080/js/script.manual.js`.

The new snippet will look like this (make sure to change the `data-domain` attribute to the domain you added to your Vince account):

```html
<script defer data-domain="yourdomain.com" src="https://localhost:8080/js/script.manual.js"></script>
```


## 2. Trigger the pageview event

Once you've added the manual extension, the `pageview` event won't be sent automatically anymore: you'll have to trigger it manually.

To trigger events manually, you need to add the following script after your regular Vince tracking script:

```html
<!-- define the `vince` function to manually trigger events -->
<script>window.vince = window.vince || function() { (window.vince.q = window.vince.q || []).push(arguments) }</script>
```

Once that's done, you can create another script in which you will trigger your pageview event:

```html
<!-- trigger pageview -->
<script>
vince('pageview');
</script>
```

At this point, your pageview events are being triggered just like before, but you haven't defined a custom location yet.
This is what we'll do in the next step.

## 3. Specify a custom location
The `vince` function in the `manual` script extension allows you to provide an option named `u`.
This option allows you to specify the URL of the page you're on.

To use it, you can update your `pageview` trigger code to add the `u` option as the second parameter, like so:

```js
vince('pageview', { u: "https://yourdomain.com/my-custom-location" + window.location.search });
```

> The `+ window.location.search` is needed to persist query parameters from your actual URL. Vince uses `ref`, `source`, `utm_source`, `utm_medium`, `utm_campaign`, `utm_content` and `utm_term` query parameters for source acquisition. [Learn more here](/website-manual-link-tagging).
At this point, your entire setup should look like this:

```html
<script defer data-domain="yourdomain.com" src="https://localhost:8080/js/script.manual.js"></script>
<!-- define the `vince` function to manually trigger events -->
<script>window.vince = window.vince || function() { (window.vince.q = window.vince.q || []).push(arguments) }</script>
<!-- trigger pageview -->
<script>
vince('pageview', { u: "https://yourdomain.com/my-custom-location" + window.location.search});
</script>
```

Once you have specified an URL through the `u` option, all the pageview events triggered from that script will be sent as if they came from that URL. In this case, all the pageview events will appear as if they came from `https://yourdomain.com/my-custom-location`).

You can specify the `u` option in your other events as well if you wish to do so.

In a real-world scenario, the URL you provide to Vince would likely be dynamic, changing depending on the current page and context. The URL can be provided by a JavaScript variable or function, or rendered by the server when generating the page. You can take a look at the examples below to see how URLs can be provided dynamically in common use cases.

## 4. Visit your website to ensure it works

You can test your custom location by visiting a page for which you specified a custom location, and ensuring pageviews events show up under the provided custom URL in your Vince dashboard.

> If you specify the same custom URL in all your website's pages, all your pages will be tracked as if they were the same. You should implement this feature with caution and test exhaustively to ensure that you are correctly tracking the data.
---

## Common usage examples

Here are a few examples of scenarios in which specifying custom locations might be useful.
### Combining data for multiple pages based on canonical URL

Let's say you have multiple URLs that link to the same pages, such as:

- `https://yourdomain.com/products/banana-leather-shoe`
- `https://yourdomain.com/products/clothes/banana-leather-shoe`
- `https://yourdomain.com/products/clothes/shoes/banana-leather-shoe`
- `https://yourdomain.com/products/clothes/men/shoes/banana-leather-shoe`

Perhaps you would like to combine all the pageviews for these pages so they all appear in Vince as the canonical URL for this product (which might be `https://yourdomain.com/products/banana-leather-shoe`, for example).

To do so, you could write a JavaScript function that gets the canonical URL and that provides it to Vince's pageview event:

```html
<script defer data-domain="yourdomain.com" src="https://localhost:8080/js/script.manual.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<script>
// Get the canonical URL element
var canonicalMeta = document.querySelector('link[rel="canonical"]');
// Use the canonical URL if it exists, falling back on the regular URL when it doesn't.
var url = canonicalMeta ? canonicalMeta.href : window.location.href;
// Send the pageview event to Vince
plausible('pageview', { u: url + window.location.search});
</script>
```

_Et voilà!_ From now on, your pageviews will automatically appear as coming from the canonical URL (`https://yourdomain.com/products/banana-leather-shoe` for the product we used in our example).

Plus, if you trigger other events on the page, you can reuse the `url` variable we generated to keep your data consistent!

### Redacting identifiers from URLs

If you have a web application, you likely have URLs with identifiers in them, such as `https://yourapp.com/project/123456/settings`. This is great for your users as they can easily bookmark pages within your app.

However, having the dashboard page of every project appear as individual pages in your analytics may not be all that great. In fact, it can rapidly make your data really hard to analyze: imagine seeing 100 different URLs in your analytics for the same route, instead of seeing a single URL with 100 pageviews.

In situations like these, redacting identifiers from URLs can make things much more manageable, and only takes a few minutes to implement.

For example, you could write a JavaScript function that uses a regular expression to remove numerical identifiers from the URLs that Vince receives:

```html
<script defer data-domain="yourdomain.com" src="https://localhost:8080/js/script.manual.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
<script>
var url = window.location.href;
// Replace every all-numeric sequences located between two slashes by "_ID_"
var redactedUrl = url.replace(/\/\d+\//g, "/_ID_/");
// Send the pageview event to Vince
vince('pageview', { u: redactedUrl + window.location.search});
</script>
```

And just like that, your pageviews will start being tracked as `https://yourapp.com/project/_ID_/settings`.

If your identifiers aren't entirely numerical, or if you only want to redact some identifiers but keep others, you can update the regular expression to match your format.

With all the different identifiers being aggregated under the same URL, it's suddenly much easier to see which pages and features your visitors use the most!
101 changes: 101 additions & 0 deletions src/content/post/website-exclude-page.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
---
title: Exclude specific pages from being tracked
category: Guides
tags:
- sites
---

By default, Vince Analytics tracks every page you install the snippet on. If you don't want Vince to track specific pages, don't include the snippet on those pages.

Alternatively, you can also manually exclude specific pages from being tracked. When excluding pages manually, the exclusion means that pageviews on the excluded page won't be counted any more from the moment of exclusion. The historical stats will be kept and will stay the same.

Outbound link clicks and other custom events on the excluded page will still track like normal. Only the pageviews will be excluded.

Here's how to exclude pages manually.

## 1. You'll need to use a different Vince script snippet

To manually exclude specific pages from being tracked, you need to change your Vince script snippet `src` attribute from `http://localhost:8080/js/script.js` to `http://localhost:8080/js/script.exclusions.js`

The new snippet will look like this (make sure to change the `data-domain` attribute to the domain you added to your Vince account):

```html
<script defer data-domain="yourdomain.com" src="http://localhost:8080/js/script.exclusions.js"></script>
```

## 2. Add the pages you'd like to exclude or include

The page-specific exclusions rely on two script options: `data-exclude` and `data-include`. To exclude certain pages from being tracked, use the `data-exclude` attribute as follows:

```
data-exclude="/blog4, /rule/*, /how-to-*, /*/admin, /*/priv/*, /more-paths-here"
```

To exclude **everything except** for some specific pages, use the `data-include` attribute in the exact same way, specifying the only pages you want to track:

```
data-include="/en**, /es**"
```

You can also use a combination of `data-include` and `data-exclude` options. Do note that when using the two options together, any page path that matches both the exclusion and inclusion rule, is **excluded** from being tracked. For example, the following combination won't track the page `/en/user/*/settings` (even though it matches the inclusion rule).

```
data-include="/en**" data-exclude="/en/user/*/settings"
```

Any pages listed in this format should be **comma-separated**, with asterisks to indicate unspecified regions of the pathname. All entries must begin with a `/`, and should **not** include the trailing slash as we account for this automatically.

- Asterisks (`*`) expand to any stretch (of length >=0) of the page path and can be on either end or in the middle of any entry, but **can't** be in the place of slashes.
- Double asterisks (`**`) expand to any stretch (of length >=0) of the page path, can be on either end or in the middle of any entry, and can represent **any** characters, even slashes.

See below for examples of common page use cases and how they would function.

## 3. Change the snippet on your site to the new snippet

The new snippet would look like this (make sure to change the `data-domain` attribute to the domain you added to your Vince account):

```html
<script defer data-domain="yourdomain.com" src="http://localhost:8080/js/script.exclusions.js" data-exclude="/blog4, /rule/*, /how-to-*, /*/admin, /*/priv/*, /more-paths-here"></script>
```

You can also use `data-include` instead of `data-exclude`, and using both options together, the snippet would look like this:

```html
<script defer data-domain="yourdomain.com" src="http://localhost:8080/js/script.exclusions.js" data-include="/en**" data-exclude="/en/user/*/settings"></script>
```

You need to place your new Vince Analytics tracking script code into the Header (`<head>`) section of your site. Place the tracking script within the `<head> … </head>` tags. Do this for all the websites where you'd like to use page-tracking exclusions.

This is the only tracking script you need. You don't need to keep the default script. Your stats will keep tracking without interruption and you won't lose any of your old data.

You don't have to use the `exclusions` script type exclusively. You can chain various script types, for example:

```html
<script defer data-domain="yourdomain.com" src="http://localhost:8080/js/script.hash.exclusions.outbound-links.js" data-include="/en**"></script>
```

The example above includes both [outbound link clicks tracking](/goals-outbound-links) and tracking for [hash-based routing pages](/website-hash-routing) in addition to the `exclusions` script type.

> If you are [tracking custom events](/goals-conversions) on pages excluded with this method, the URLs of those pages will keep showing in your dashboard. You can override and anonymize the URLs reported through custom events by using [our manual script extension](/website-custom-location).
## Common use cases and examples

| inclusion or exclusion rule | pages that will match |
| ------------- | ------------- |
| `/blog4` | `/blog4` and exactly `/blog4` with nothing before or after it, so not `/blog45` nor `/blog4/new` nor `/blog` |
| `/rule/*` | `/rule/<anything>`, with `<anything>` being any set of characters (length >=0), but not a forward slash - for example, both `/rule/1` as well as `/rule/general-rule-14`, but not `/rule/4/details` nor `/rules` |
| `/how-to-*` | `/how-to-<anything>` - for example, `/how-to-play` or `/how-to-succeed`, but not `how-to-/blog` |
| `/*/admin` | `/<anything>/admin` - for example, `/sites/admin`, but not `/sites/admin/page-2` nor `/sites/2/admin` nor `/admin` |
| `/*/priv/*` | `/<anything>/priv/<anything>` - for example, `/admin/priv/sites`, but not `/priv` nor `/priv/page` nor `/admin/priv` |
| `/rule/*/*` | `/rule/<anything>/<anything>` - for example, `/rule/4/new/` or `/rule/10/edit`, but not `/rule` nor `/rule/10/new/save` |
| `/wp/**` | `/wp<anything, even slashes>` - for example, `/wp/assets/subdirectory/another/image.png` or `/wp/admin`, and everything in between, but not `/page/wp`

This exclusion method currently does not support filtering out specific page [hashes](/website-hash-routing), but may in the future.

## Return to your website to ensure it works

You can test your page-specific exclusions by:

* Visiting a page on your website that you excluded from tracking and ensuring views for it don't show in your Vince dashboard.

* Alternatively, after loading a page, you can check the browser console (press F12 on Firefox or Chrome and then click the "Console" tab). If you've excluded your pages and are browsing on the excluded page, you should see a message saying "Ignoring event in exclusion". You may need to ensure the "Warnings" filter (in the top right in Firefox and top-center under a dropdown in Chrome) is enabled before this message is visible.
24 changes: 24 additions & 0 deletions src/content/post/website-hash-routing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
title: Hash-based routing
category: Guides
tags:
- sites
---

Vince Analytics integrates automatically with `pushState` based frontend routers. However, if you're using a frontend
framework that uses the URL hash for routing, you need to take an extra step to install the hash-based tracker instead of the default one.

The hash-based tracker is available by changing your script to load `http://localhst:8080/js/script.hash.js` instead of
the default `http://localhst:8080/js/script.js`.

Here's what the full script tag will look like:

```html
<script defer data-domain="yourdomain.com" src="http://localhst:8080/js/script.hash.js"></script>
```


This tracker will change two things about how events are collected:

* Trigger pageviews on the `hashchange` event
* Normally the hash part of the URL is discarded in your Vince dashboard. In hash-mode, the hash part is preserved in your stats so you can see the different pages your visitors have viewed.
Loading

0 comments on commit 01c2ab4

Please sign in to comment.