Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gaia-charge/svelte-ackee

📊️ Ackee analytics component for Svelte
https://github.com/gaia-charge/svelte-ackee

ackee analytics hacktoberfest svelte sveltejs

Last synced: 2 months ago
JSON representation

📊️ Ackee analytics component for Svelte

Awesome Lists containing this project

README

        


Svelte
+
Ackee

# Svelte module for Ackee

[Ackee](https://ackee.electerious.com/) is a self-hosted analytics tool for those who care about privacy and this module makes it easy to integrate with Svelte/Sapper.

## Installation

```
$ npm install --save svelte-ackee
```

## Usage

### With Sapper

Edit the `routes/_layout.svelte` and add following script:

```js
import { afterUpdate, beforeUpdate } from "svelte";
import { useAckeeSapper } from "svelte-ackee";

export let segment;

const ackeeTracker = useAckeeSapper(
beforeUpdate,
afterUpdate,
{
server: "https://example.com", // Set to your Ackee instance
domainId: "hd11f820-68a1-11e6-8047-79c0c2d9bce0", // Set to your domain ID
},
{
ignoreLocalhost: false,
}
);
```

See the demo in [`demos/sapper`](demos/sapper) directory.

### With Routify

Edit the `App.svelte` and add following:

```js
import { useAckeeSvelte } from "svelte-ackee";
import { afterPageLoad } from "@roxi/routify";

const ackeeTracker = useAckeeSvelte(
$afterPageLoad,
{
server: "https://example.com",
domainId: "hd11f820-68a1-11e6-8047-79c0c2d9bce0",
},
{
ignoreLocalhost: false,
}
);
```

See the demo in [`demos/routify`](demos/routify) directory.

### Accessing underlying `ackee-tracker`

Both `useAckeeSapper` and `useAckeeSvelte` return an [`ackee-tracker` instance](https://github.com/electerious/ackee-tracker) so you can call it manually as well:

```js
ackeeTracker.action("513a082c-2cd5-4939-b417-72da2fe1761d", {
key: "Checkout",
value: 9.99,
});
```