Testing for LiveSquad

for Google Analytics

by Alex Cowan

HTML

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-130183387-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());

  gtag('config', 'UA-261645170');

</script>

<div id='rg-container'>
  <h1>Spirit Animal Reporting Form</h1>
  <p>
    Please describe your spirit animal to the best of your ability.
  </p>
  <div class='rg-item'>
    <form id='typing-form' method='post' onsubmit="return false">
      <h2>Now You Type</h2>
      <input type="text" placeholder="Spirit Animal" class='text-input' id="spirit-animal">
      <input type="text" placeholder="Color of Spirit Animal" class='text-input' id="spirit-animal-color">
    </form>
  </div>
  <div class='rg-item'>
    <form id='checking-form' method='post' onsubmit="return false">
      <h2>Now You Check</h2>
      <p>
        Please check all that apply to your spirit animal.
      </p>
      <input type="checkbox" class='checkbox-input' id="has-hair">
      <label for="has-hair">Hair?</label>
      <input type="checkbox" class='checkbox-input' id="has-scales">
      <label for="has-scales">Scales?</label>
      <input type="checkbox" class='checkbox-input' id="has-wings">
      <label for="has-wings">Wings?</label>
    </form>
  </div>
  <div class='rg-item'>
    <form id='dropping-form' method='post' onsubmit="return false">
      <h2>Now You Drop</h2>
      <p>
        Please specify the type of your spirit animal.
      </p>
      <select id='spirit-animal-type'>
        <option value="Blank">Select</option>
        <option value="Real">Real</option>
        <option value="Imaginary">Imaginary</option>
      </select>
    </form>
  </div>
  <div class='rg-item'>
    <h2>Now You Done</h2>
    <button id='submit-btn'>Submit</button>
  </div>
</div>

CSS

h1 {
  margin: 2px;
}

h2 {
  margin: 5px;
}

p {
  margin: 2px;
}

#rg-container {
  border: 1px solid #CCC;
  padding: 5px;
}

.rg-item {
  border: 1px solid #CCC;
  padding: 3px;
  margin: 3px;
}

.text-input {
  display: block;
  margin: 3px;
}

JavaScript

$("#typing-form").on("focusout", function() {
  console.log('I am ' + $(this).attr('id') + ' and I have lost focus.');
  //console.log($(this).attr('id'));
  action = 'doing ' + $(this).attr('id');
  label = 'f1: ' + $('#spirit-animal').val() + ', ' + 'f2: ' + $('#spirit-animal-color').val();
  console.log(label);
  doga("spirit form type", action, label);
});

$("#checking-form").on("focusout", function() {
  console.log('I am ' + $(this).attr('id') + ' and I have lost focus.');
  action = 'doing ' + $(this).attr('id');
  label = 'cbox1: ' + $('#has-hair').is(':checked') + ', ' + ', cbox2: ' + $('#has-scales').is(':checked') + ', cbox3: ' + $('#has-wings').is(':checked');
  doga("spirit form check", action, label);
});

$("#dropping-form").on("focusout", function() {
  console.log('I am ' + $(this).attr('id') + ' and I have lost focus.');
  action = 'doing ' + $(this).attr('id');
  label = 'dd1: ' + $('#spirit-animal-type').val();
  doga("spirit form drop", action, label);
});

$("#submit-btn").on("click", function() {
  console.log('I am clicked!');
  doga("form-finish", "click", "submitted");
});

function doga(category, action, label, value) {
  console.log(category, action, label, value);
  gtag('event', 'click', {
    'event_category': category,
    'event_action': action,
    'event_label': label,
    'event_value': value
  });
}