[](https://www.webcomponents.org/element/datacite/data-metrics-badge)
[](https://badge.fury.io/js/data-metrics-badge)
[](https://www.jsdelivr.com/package/npm/data-metrics-badge)
[](https://travis-ci.org/datacite/spitz)
# Data Metrics Badge
The *Data Metrics Badge* provides an open and easy way to display the number of citations and usage that your research datasets and resources have received.
The *Data Metrics Badge* was created as part of the [PARSEC](http://www.belmontforum.org/projects/4057/), Building New Tools for Data Sharing and Reuse through a Transnational Investigation of the Socioeconomic Impacts of Protected Areas.
The *Data Metrics Badge* is a an easy way to embed usage and citations metrics from DataCite Services on your repository landing page. Usage statistics are processed according to the [Code of Practice for Research Data](https://www.projectcounter.org/code-practice-research-data/). Citation statistics are collected via the [DataCite and Crossref EventData Service](https://blog.datacite.org/are-your-data-being-used-event-data-has-the-answer/).
## Browsers support
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| --------- | --------- | --------- | --------- | --------- |
| Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
One will need to include the web-components-loader for Edge and IE compatibility.
```html
```
## Installation and Usage
Getting set up with a Data Metrics Badge is a straightforward process – just add the following code to the HTML of your website wherever you want the Data Metrics Badge to appear:
```html
```
There is also a [live demo](https://support.datacite.org/docs/displaying-usage-and-citations-in-your-repository).
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build --target wc --name data-metrics-badge 'src/components/DataMetricsBadge.vue'
npm version patch -m "Upgrade to %s for reasons"
```
### Run your tests
```
yarn test:unit tests/
```
### Lints and fixes files
```
npm run lint
```
### Publishing to NPMJS.com
After merging changes via a pull request, manually run the bump-version github action, using the next version number after the last released version. The bump-version action will set the correct version in package.json, commit it, and create a release tag. Then, create a release using that tag.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## License
MIT
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).