Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Updated README file #14

Closed
wants to merge 1 commit into from
Closed

fix: Updated README file #14

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 57 additions & 29 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,79 @@
[![Community Project header](https://github.com/newrelic/opensource-website/raw/master/src/images/categories/Community_Project.png)](https://opensource.newrelic.com/oss-category/#community-project)

# New Relic HTML5 Tracker

New Relic video tracking for HTML5.

## Requirements
# New Relic Html5 Tracker Agent

The New Relic Html5 Tracker enhances your media applications by tracking video events, playback errors, and other activities, providing comprehensive insights into performance and user interactions.

- The Html5 tracker is available as a ready-to-use JavaScript snippet for easy copy-paste integration.
- New Relic Html5 tracker auto-detects events emitted by Html5 Player.
- Ensure that the **Browser agent** is successfully instrumented before deploying the media tracker.
- For questions and feedback on this package, please visit the [Explorer's Hub](https://discuss.newrelic.com), New Relic's community support forum.
- Looking to contribute to the Player Name agent code base? See [DEVELOPING.md](./DEVELOPING.md) for instructions on building and testing the browser agent library, and Contributors.

## Adding The Html5 Tracker To Your Project

To integrate New Relic Tracker Agent into your web application effectively, you'll need to instrument the Browser Agent code first and then add the player script. Below is a guide on how to do this within your HTML file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New Relic Tracker Integration</title>
<script src="path/to/browser-agent.js"></script>
<!-- snippet code generated -->
<script src="path/to/Html5-tracker.js"></script>
</head>
<body>
<!-- Your HTML content -->
</body>
</html>
```

This video monitor solutions works on top of New Relic's **Browser Agent**.
## Instantiating the Html5 Tracker

## Build
```javascript
// Add a Html5Tracker
nrvideo.Core.addTracker(new nrvideo.Html5Tracker(player));

Install dependencies:
//For setting custom attributes const tracker
const tracker = new nrvideo.Html5jsTracker(player, {
customData: {
contentTitle: 'Override Existing Title',
customPlayerName: 'myGreatPlayer',
customPlayerVersion: '9.4.2',
},
});

```
$ npm install
```
// For setting userId
tracker.setUserId('userId');

And build:
// For Sending custom Action with Attributes

```
$ npm run build:dev
```
const tracker = new nrvideo.Html5Tracker(player);

Or if you need a production build:
nrvideo.Core.addTracker(tracker);

```
$ npm run build
tracker.sendCustom('CUSTOM_ACTION', 'state time', {
test1: 'value1',
test2: 'value2',
});
```

## Usage
## Data Model

Add **scripts** inside `dist` folder to your page.

```javascript
// <video id="myPlayer"></video>
nrvideo.Core.addTracker(new nrvideo.Html5Tracker('myPlayer'))
```
To understand which actions and attributes are captured and emitted by the Html5 Player under different event types, see [DataModel.md](./DATAMODEL.md).

## Support

New Relic has open-sourced this project. This project is provided AS-IS WITHOUT WARRANTY OR DEDICATED SUPPORT. Issues and contributions should be reported to the project here on GitHub.
New Relic hosts and moderates an online forum where customers can interact with New Relic employees as well as other customers to get help and share best practices. Like all official New Relic open source projects, there's a related Community topic in the New Relic [Explorer's Hub](https://discuss.newrelic.com).

We encourage you to bring your experiences and questions to the [Explorers Hub](https://discuss.newrelic.com) where our community members collaborate on solutions and new ideas.
We encourage you to bring your experiences and questions to the [Explorer's Hub](https://discuss.newrelic.com) where our community members collaborate on solutions and new ideas.

## Contributing

We encourage your contributions to improve New Relic HTML5 Tracker! Keep in mind when you submit your pull request, you'll need to sign the CLA via the click-through using CLA-Assistant. You only have to sign the CLA one time per project. If you have any questions, or to execute our corporate CLA, required if your contribution is on behalf of a company, please drop us an email at [email protected].
We encourage your contributions to improve New Relic Html5 Tracker! Keep in mind when you submit your pull request, you'll need to sign the CLA via the click-through using CLA-Assistant. You only have to sign the CLA one time per project. If you have any questions, or to execute our corporate CLA, required if your contribution is on behalf of a company, please drop us an email at [email protected].

**A note about vulnerabilities**

Expand All @@ -55,4 +83,4 @@ If you believe you have found a security vulnerability in this project or any of

## License

New Relic HTML5 Tracker is licensed under the [Apache 2.0](http://apache.org/licenses/LICENSE-2.0.txt) License.
New Relic Html5 Tracker is licensed under the [Apache 2.0](http://apache.org/licenses/LICENSE-2.0.txt) License.
Loading