The Piano Analytics Javascript SDK allows you to collect audience measurement data for the Piano Analytics solution. It works on all javascript environments dedicated to browsers (mostly websites).
This SDK makes the implementation of Piano Analytics as simple as possible, while keeping all the flexibility of the solution. By loading this small library on your platform, and using dedicated and documented methods, you will be able to send powerful events.
It also includes Privacy tagging methods that allow you a perfect management of your tagging depending on the regulation you refer to.
- Install our library on your project (see below), you have a few possibilities :
- Using NPM
- Using our CDN (browser only)
- Cloning the GitHub project to build a file you will host (browser only)
- You can use this method if you want to configure your library without additional tagging (ex: like having your site and collect domain already configured in the built file). However, we suggest the NPM method if you use Build Tools (webpack etc.)
- Check the documentation for an overview of the functionalities and code examples
-
install our library
npm install piano-analytics-js --save (--legacy-peer-deps) or yarn add piano-analytics-js
-
Configure your site and collect domain in your site/application initialization
import {pianoAnalytics} from 'piano-analytics-js'; // for commonJS environment you can do the following // const pianoAnalytics = require('piano-analytics-js').pianoAnalytics; // in your initialization pianoAnalytics.setConfigurations({ 'site': 123456789, 'collectDomain': 'https://log.xiti.com' });
-
Send events !
pianoAnalytics.sendEvent('page.display', // Event name { 'page': 'page name', // Event properties 'page_chapter1': 'chapter 1' , 'page_chapter2': 'chapter 2' , 'page_chapter3': 'chapter 3' } );
- Load the file from our CDN and configure your site and collect domain
<head> <script src="https://tag.aticdn.net/piano-analytics.js"></script> <script type="text/javascript"> pa.setConfigurations({ site:123456789, collectDomain:'https://log.xiti.com' }); </script> </head>
- Send events
<body> <script type="text/javascript"> pa.sendEvent('page.display', // Event name { 'page': 'page name', // Event properties 'page_chapter1': 'chapter 1' , 'page_chapter2': 'chapter 2' , 'page_chapter3': 'chapter 3' } ); </script> </body>
-
Clone the repo
git clone https://github.com/at-internet/piano-analytics-js
-
Install NPM packages
npm install --legacy-peer-deps or yarn install
-
Enter your site and collect domain in
src/config.js(optionnal if you want to do it in your implementation)'site': 123456789, 'collectDomain': 'https://log.xiti.com' -
Build the file
npm run build
-
Get
piano-analytics.jsin/dist/browser/ -
Load it and send events
<head>
<script src="https://url-to-your-file/piano-analytics.js"></script>
</head>
<body>
<script type="text/javascript">
pa.sendEvent('page.display', // Event name
{
'page': 'page name', // Event properties
'page_chapter1': 'chapter 1' ,
'page_chapter2': 'chapter 2' ,
'page_chapter3': 'chapter 3'
}
);
</script>
</body>For more examples, please refer to the Documentation
If you think there is a bug and are in a development environment, you can build the SDK without it being uglified using the following npm script
npm run rollup:browserAlso, quoting code using this will help us understand your issue
Please do not hesitate to contribute by using this github project, we will look at any merge request or issue. Note that we will always close merge request when accepting (or refusing) it as any modification has to be done from our side exclusively (so we will be the ones to implement your merge request if we consider it useful). Also, it is possible that issues and requests from GitHub may take longer for us to process as we have dedicated support tools for our customers. So we suggest that you use GitHub tools for technical purposes only :)
Distributed under the MIT License.
AtInternet a Piano Company - support@atinternet.com