https://github.com/topsort/analytics.js

Topsort's JS analytics event library
https://github.com/topsort/analytics.js

ads analytics sponsored-listings topsort

Last synced: about 2 months ago
JSON representation

Topsort's JS analytics event library

• Host: GitHub
• URL: https://github.com/topsort/analytics.js
• Owner: Topsort
• License: mit
• Created: 2022-01-05T15:05:31.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-04T09:02:32.000Z (2 months ago)
• Last Synced: 2024-11-08T19:50:12.429Z (about 2 months ago)
• Topics: ads, analytics, sponsored-listings, topsort
• Language: TypeScript
• Homepage:
• Size: 1.04 MB
• Stars: 2
• Watchers: 13
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![version](https://img.shields.io/npm/v/@topsort/analytics.js)

![downloads](https://img.shields.io/npm/dw/@topsort/analytics.js)

![license](https://img.shields.io/github/license/Topsort/analytics.js)

![GitHub Repo stars](https://img.shields.io/github/stars/topsort/analytics.js?style=social)

# Topsort analytics.js

Topsort's JS analytics event library

Use this to send clicks and impressions to the Topsort API.

# Installation

With npm

```

npm install @topsort/analytics.js --save

```

# Usage

### Load topsort.js

```html

  window.TS = {

    token: "<YOUR-TOPSORT.JS-TOKEN>", // Generate a token for each environment in the Topsort Auction Manager

    url: "https://api.topsort.com",

  };

```

### Add markup to your products

Either mix quotes (single/double) or escape certain characters inside your values. In javascript:

```js

const newvalue = currentvalue.replace('"', """).replace("'", "'"); // etc.

```

Add the following markup to promoted products:

```html

...

```


and the following for organic products (which is optional)

```html

...

```


Additionally, in case not all the container is clickable (i.e., does not produce an action or does not take you to the product page) or parts of it lead you to a non-related product page, make sure to use the `data-ts-clickable` attribute to indicate what portions of the product should count as a conversion.

```html



  


    

    Product Title

  

  Help



```


Adding further information to purchases can be made by passing the `ts-data-items` JSON array:

```html



  My purchase



```


Finally, in case you are using banners and want to have further control on the attributable products you need to add the following markup in the banner's destination page.

```html



  ...



```


# Troubleshooting

## I see `Uncaught Error: Mismatched anonymous define() module` in the browser console

You are most likely running into issues with how the library is loaded. This is a common issue with RequireJS and other AMD loaders. The library is not AMD compatible, so you need to load it as a global script.

Another approach is to use the ESM version of the library, which you can either import directly should you import the library as part of your distribution; or use the published version called `ts.mjs`: `https://unpkg.com/@topsort/[email protected]/dist/ts.mjs`.

# E2E tests

Execute `npm run test:e2e`, at the end it will show you the url you need to visit to test the library.

Ideally you would check the library both in desktop and mobile browsers. For that you need to be connected to the same network.