https://github.com/mikachan/svelte-track-outboundlink

Svelte component for tracking outbound links in analytics.
https://github.com/mikachan/svelte-track-outboundlink

analytics gtag svelte typescript

Last synced: 9 days ago
JSON representation

Svelte component for tracking outbound links in analytics.

• Host: GitHub
• URL: https://github.com/mikachan/svelte-track-outboundlink
• Owner: mikachan
• License: mit
• Created: 2021-03-22T22:44:59.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-03-26T01:30:38.000Z (over 3 years ago)
• Last Synced: 2024-04-23T23:02:55.001Z (7 months ago)
• Topics: analytics, gtag, svelte, typescript
• Language: Svelte
• Homepage:
• Size: 491 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-track-outboundlink

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)

Svelte component for tracking outbound links in analytics.

Currently works with [Google Tag Manager (gtag.js)](https://developers.google.com/analytics/devguides/collection/gtagjs). Package assumes that you have already installed gtag.js.

## Install

```sh

npm i svelte-track-outboundlink -D

```

The `OutboundLink` component will be output as an anchor tag. When clicked it will fire a [gtag.js event](https://developers.google.com/analytics/devguides/collection/gtagjs/events) with the following properties:

- Action: `click`

- Category: `outbound`

- Label: the `href` prop value

- Transport type: `beacon`

## Usage

Import the component and use it in place of an anchor tag when linking to external pages:

```html

  import OutboundLink from "svelte-track-outboundlink";

Example Link

```

The following props are available:

| Name      | Type | Default | Example |

| ----------- | ----------- | ----------- |----------- |

| href      | string | `javascript:void(0);`       | `https://www.exmaple.com` |

| target   | string | `undefined`        | `_blank` |

| rel  | string | `undefined`        | `noreferrer` |