Track element's data attributes if present

[davidalejandroaguilar]

Description

This PR allows tracking an element's data attributes if they're present.

Motivation

Allow easier querying and segmenting of events. For example on 2 different pages:

<a href="/">Open Github</a>

<a href="/">Sign Up</a>

Adding an id and grouping identifier to them:

<a href="/" data-ahoy-track-id="open-github" data-ahoy-track-group="onboarding">Open Github</a>

<a href="/" data-ahoy-track-id="sign-up" data-ahoy-track-group="onboarding">Sign Up</a>

Will allow you to both:

• Easily query for specific clicks on the "Open Github" link, even if the link text changes.
• Group clicks belonging to the onboarding group.

Note that you can't rely on the id, because it might be used for some other JS and might change.

Also, Ahoy's data-section is pretty limiting, since you can only use it for one of the above things. That is, either identifying an event across text changes, or grouping multiple links/forms, but not both.

Example

Clicking the "Open Github" link above will provide:

{
  // ...
  properties: {
    tag: "a",
    data: {
      "ahoy-track-id": "open-github",
      "ahoy-track-group": "onboarding"
    },
    page: "/"
  }
}

Get the events for onboarding:

Ahoy::Event.where_props("data" => {"ahoy-track-group" => "onboarding"})

Get the events for clicks on the "Open Github" link, even if the text changed:

Ahoy::Event.where_props("data" => {"ahoy-track-id" => "open-github"})

This will work even if the event has other properties on the data attribute.

[pedrocarmona]

Suggested change

	data: getDatasetInKebabCase(this)
	data: this.dataset

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

seams to be available accross browsers:
https://caniuse.com/?search=dataset

[davidalejandroaguilar]

Hey there!

this.dataset returns camelCase, but I'm returning them in kebab-case, so that the event properties reflect exactly how the element had them written, minus the data prefix. e.g.

<div data-foo-bar="baz"></div>

Would be:

properties: {
  data: {
    "foo-bar": "baz"
  }
}