A collection of analytics helper functions.

• Plausible

1. Install

$ yarn add @oddcamp/analytics

2. Enjoy

import { enableAutoEventAnalytics } from "@oddcamp/analytics"

enableAutoEventAnalytics()

HTML

  <a href="/" data-event-analytics='{"name": "Click", "props": {"trigger": "anchor"}}'>
    Link
  </a>

ERB

  <%= link_to 'Link', root_path, data: {event_analytics: {name: 'Click', props: {trigger: 'anchor'}}} %>

JSX

  <a href="/" data-event-analytics={JSON.stringify({name: 'Click', props: {trigger: 'anchor'}})}>
    Link
  </a>

1. Create .env and set variables of analytics services you prefer to test:
   • PLAUSIBLE_DOMAIN
2. $ yarn install
3. $ yarn dev
4. localhost:1234

Enabled automatic event analytics for element clicks and form submissions.

Defaults:

enableAutoEventAnalytics({
  attributeName = `event-analytics`,
  sourceNode = document,
  services = [`plausible`],
  debug = false,
})

Returns: function which disables automatic event analytics if executed, e.g.:

const disableAutoEventAnalytics = enableAutoEventAnalytics()
// ...
disableAutoEventAnalytics()

The value of attributeName attribute must be a JSON, e.g.:

{
  "name": "", // name; mandatory
  "props": {}, // custom properties
  "options": {
    "allFieldsAsProps": false, // sets all form fields as props on form submissions
  }
}

Get all form field name and value pairs as props using boolean allFieldsAsProps option or specify field(s) manualy by setting data-event-analytics-field attribute, e.g.

  <form data-event-analytics="{...}">
    <input type="search" name="query" data-event-analytics-field>
  </form>

Note: the attribute name may differ if you used a custom value for attributeName parameter (${attributeName}-field).

Analyticizes an event.

Defaults:

analyticizeEvent({ 
  data, 
  services = [`plausible`],
  debug = false 
})

Example:

analyticizeEvent({
  data: {
    name: `Event name`,
    props: {
      key: `value`,
    },
  },
})