SoundCloud IFRAME Analytics
A minimal library that attaches Google Analytics event tracking to user interactions
performed on embedded SoundCloud IFRAMEs.
This allows you to track user behaviour as well as have the events act as beacons to
more accurately see page session duration. It also helps you in finding out how popular
some of your tracks are ;)
Installation
You can install this repository as a node module using npm:
npm install soundcloud-iframe-analytics --save-dev
How to integrate within your application
Embed the Analytics tracking code as provided by Google into your template(s).
Embed the SoundCloud IFRAMEs according to the embed code provided by SoundCloud. You do not need to make
any changes to your markup. E.g. simply inject one or more instances of:
<iframe width="100%" height="300"
scrolling="no" frameborder="no"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/{STRING_ID}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>
Include the minimized production version of the script (./dist/sia.min.js) and the script
will automatically attach event listeners once the page has finished loading.
Alternatively, you can import the ES6 module from the ./src folder and embed the library
within your custom application code.
Development
Setup
Install dependencies as usual:
npm install
Local development
Launching a local server (webpack-dev-server) with livereload and
automatic recompilation on changes. Server will be available at
http://localhost:8080
npm run dev
Creating a production build
npm run build
Build output will be stored in ./dist-folder.
Unit testing
Unit tests are run via Mocha, which is installed as a dependency, along
with Chai as the assertion library. You can run the tests by using:
npm test
Unit tests go in the ./test-folder. The file name for a unit test must
be equal to the file it is testing, but contain the suffix ".test",
e.g. Functions.js will have a test file Functions.test.js.
Tests will be available at http://localhost:8080/test/test.html.
Configuration
Configurations for all target environments are in the root of the
repository in the webpack.config.{TARGET}.js files.