https://github.com/vishalkalola1/clappr-analytics-plugin

A plugin for clappr which will get all user events. Event handlers can be used to handle and verify user input, user actions, and browser actions.
https://github.com/vishalkalola1/clappr-analytics-plugin

analytics clappr demo javascript module plugin socket-io

Last synced: 2 days ago
JSON representation

A plugin for clappr which will get all user events. Event handlers can be used to handle and verify user input, user actions, and browser actions.

• Host: GitHub
• URL: https://github.com/vishalkalola1/clappr-analytics-plugin
• Owner: vishalkalola1
• License: mit
• Created: 2020-11-19T13:27:40.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-05-10T08:40:01.000Z (over 2 years ago)
• Last Synced: 2024-11-14T00:41:13.381Z (2 days ago)
• Topics: analytics, clappr, demo, javascript, module, plugin, socket-io
• Language: JavaScript
• Homepage: https://vishalkalola1.github.io/Clappr-Analytics-Plugin/
• Size: 1.24 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Clappr Analytics Plugin

[![npm version](https://badge.fury.io/js/clappr-analytics-plugin.svg)](https://www.npmjs.com/package/clappr-analytics-plugin)

**A plugin for clappr which will get all user events. Event handlers can be used to handle and verify user input, user actions, and browser actions:**

* Things that should be done every time a page loads

* Things that should be done when the page is closed

* Action that should be performed when a user clicks a button

* Content that should be verified when a user inputs data

* And more ...

**Many different methods can be used to let JavaScript work with events:**

* HTML event attributes can execute JavaScript code directly

* HTML event attributes can call JavaScript functions

* You can assign your own event handler functions to HTML elements

* You can prevent events from being sent or being handled

* And more ...

# Usage

Add both Clappr and the Analytics plugin scripts to your HTML:

**HTML**

```

  

  

```

Then just add `ClapprAnalyticsPlugin` into the list of plugins of your player instance, and the options for the plugin go in the `analyticsdata` property as shown below.

**Javascript**

```

var player = new Clappr.Player({

    source: "https://tjenkinson.me/clappr-thumbnails-plugin/assets/video.mp4",

    parentId: "#player",

    plugins: {

        container: [ClapprAnalyticsPlugin]

    },

    analyticsdata: {

        socketbaseurl: 'https://clappranalytics.herokuapp.com/', // add your backend url

        channelname: "events", // get channelname from backend and add here

        offlinedatachannelname: "offlineevents" // get offlineevents from backend and add here

    }

});

```

**Note: Setup Flask with socket.io and connect through websocket. do not use transport long-polling method use websocket**

[![Github Version](https://badge.fury.io/gh/vishalkalola1%2FClappr-Analytics-Plugin.svg)](https://vishalkalola1.github.io/Clappr-Analytics-Plugin/)

**Backend**

```

@socketio.on("offlineevents") // "offlineevents" channel name in frontend

def handle_offlinedata(messages):

    return messages

    

@socketio.on("events") // "events" channel name in frontend

def handle_Channel1(message):

    return message

```

# Development Server

`npm run start`

# Development

* Install dependencies:

`npm install`

* Build:

`npm run build`

* Minified version:

`npm run release`