data-metrics examples

Add metrics

<button class="btn btn-primary" data-metrics="Documents|Click|JavaScript Ebook">
  Add metrics
</button>

Category: Documents Action: Click Label: JavaScript Ebook

Link with href

<a href="http://www.amazon.com" data-metrics="Book|View|JavaScript Patterns">
  Link with href
</a>

Category: Book Action: View Label: JavaScript Patterns

Link with href and target="_blank"

<a href="http://www.amazon.com" target="_blank" data-metrics="Book|View|JavaScript Patterns">
  Link with href and target="_blank"
</a>

Category: Book Action: View Label: JavaScript Patterns

Link without href

<a data-metrics="Contact Page|Click|Map Address">
  Link without href
</a>

Category: Contact page Action: Click Label: Map Address

<form action="example.html" data-metrics="Sign In|Submit">
  <div class="row">
    <div class="col-xs-3">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">Password</label>
        <input type="password" class="form-control" id="exampleInputEmail1" placeholder="Enter password">
      </div>
    </div>
  </div>
  <input type="submit" class="btn btn-primary" value="Sign in">
</form>

Category: Sign In Action: Submit Label: (not set)

Pure JavaScript

document.querySelector('.click-image').onclick = function() {
  dataMetrics.sendToGA('Images', 'Click', 'Marlos Carmo');
}

jQuery

$('.click-image').click(function() {
  dataMetrics.sendToGA('Images', 'Click', 'Marlos Carmo');
});

Category: Images Action: Click Label: Marlos Carmo

Pure JavaScript

document.querySelector('.hover-image').onmouseover = function() {
  dataMetrics.sendToGA('Images', 'Hover', 'Erick Belfort');
}

jQuery

$('.hover-image').hover(function() {
  dataMetrics.sendToGA('Images', 'Hover', 'Erick Belfort');
});

Category: Images Action: Hover Label: Erick Belfort