Git Product home page Git Product logo

flare's Introduction

flare.js Build Status

flare.js, a <1KB unobtrusive event emitter API for Google Universal Analytics. With flare you can easily bind event JSON to a data-* attribute, or use flare.emit() to fire flares directly. Flare automatically calls ga('send') and constructs other properties (and arguments order) so you don't communicate with ga() directly. IE8+.

Remember to drop in Google Analytics beforehand! See docs for more.

As data-* attribute

Pass in a JSON Object to data-flare to bind your event descriptors. Flare binds a click event unless a custom event is specified using data-flare-event="":

<!-- defaults to `click` -->
<a href="/promotions" data-flare='{
  "category": "KPI sections",
  "action": "click",
  "label": "Visit the promotions",
  "value": 4
}'>Click me</a>

<!-- uses `mouseover` -->
<a href="/promotions" data-flare-event="mouseover" data-flare='{
  "category": "KPI sections",
  "action": "mouseover",
  "label": "Visit the promotions",
  "value": 4
}'>Click me</a>

The data-flare-event gets passed into addEventListener and attachEvent, so ensure the event is valid.

As flare parses JSON from the data-* attribute, you can of course use some of the custom Google Universal Analytics properties such as { 'page': '/my-new-page' } and { 'nonInteraction': 1 }:

<a href="/promotions" data-flare='{
  "category": "KPI sections",
  "action": "click",
  "label": "Visit the promotions",
  "value": {
    "page": "/my-new-page"
  }
}'>Click me</a>

flare.emit()

Emit a custom flare to send to Google Universal Analytics:

flare.emit({
  category: "KPI sections",
  action: "click",
  label: "Visit the promotions",
  value: 4
});

Then use within your own logic:

<a href="/promotions" class="promotions">Click me</a>
<script>
document
  .querySelector('.promotions')
  .addEventListener('click', function () {
    // emit a flare
    flare.emit({
      category: "KPI sections",
      action: "click",
      label: "Visit the promotions",
      value: 4
    });
  }, false);
</script>

Installing with Bower

bower install flare

Manual installation

Ensure you're using the files from the dist directory (contains compiled production-ready code). Ensure you place the script before the closing </body> tag.

<body>
  <!-- html above -->
  <script src="dist/flare.js"></script>
  <script>
  // flare module available
  </script>
</body>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp.

Release history

  • 1.0.1

    • Add Go Squared event tracking
  • 1.0.0

    • Initial release

flare's People

Contributors

seanislegend avatar toddmotto avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.