<h3>Instructions</h3>
<div class="doc">
  1) <a href='#downloadedFile'>Click</a> to track event into GA.<br> 2) <a href="https://analytics.google.com/analytics/" target="_blank">Open Google Analyics -> Real Time -> Events</a> and see the new events.
</div>
<hr>
<h3>Status</h3>
<div id='status'></div>
<br>
<hr>
<br> 3)You can also enter values in the form and see how each event is recorded in GA.
<br>
<div id='main'>
  <form>
    <fieldset>
      <legend>Contact</legend>
      <div class="form-group">
        <label for="frmNameA" class="col-lg-2 control-label">Name</label>
        <div class="col-lg-10">
          <input name="name" id="frmNameA" class="form-control validate" placeholder="Full name" required autocomplete="name"></div>
      </div>
      <div class="form-group">
        <label for="frmEmailA" class="col-lg-2 control-label">Email</label>
        <div class="col-lg-10">
          <input type="email" name="email" class="form-control validate" id="frmEmailA" placeholder="[email protected]" required autocomplete="email"></div>
      </div>
      <div class="form-group">
        <label for="frmEmailC" class="col-lg-2 control-label">Confirm Email</label>
        <div class="col-lg-10">
          <input type="email" name="emailC" class="form-control validate" id="frmEmailC" placeholder="[email protected]" required autocomplete="email"></div>
      </div>

      <div class="form-group">
        <label for="frmPhoneNumA" class="col-lg-2 control-label">Phone</label>
        <div class="col-lg-10">
          <input type="tel" name="phone" id="frmPhoneNumA" class="form-control validate" placeholder="+1-650-450-1212" required autocomplete="tel"></div>
      </div>
    </fieldset>
    <button id="gogo">Go!</button>

  </form>
</div>

body {
  font-size: 120%;
  width: 20em;
}

#main {
  background: rgba(150, 150, 11, 0.45);
  padding: 1em;
  border-radius: 15px;
}

#status {
  background: lightgray;
  padding: 1em;
}

.doc {
  background: yellow;
  font-size: 110%;
  padding: 1em;
  border-radius: 15px;
}

input {
  font-size: 130%;
}

.control-label {
  padding-top: 0.2em;
}

button {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  margin-top: 0.5em;
  width: 5em;
  font-size: 130%;
  background: rgba(27, 41, 27, 0.62);
  border-radius: 0.3em;
}

	$(document).ready(function() {
	  // send to GA each change event - so we could see 'full' values 
	  // that we got from Autofill Vs 'incremental' values that users 
	  // typed.
	  //
	  $('input').on('input', function() {
      var logStr = "-- Field-Id: " + this.id + " value: " + this.value + " time: " + Date.now();
      ga('send', 'event', 'input', 'fill-action', "id: "+ this.id + " , " +this.value + " time: " + Date.now());
	    $("#status").html(logStr);
	    console.log(logStr);
	  });

	  //
	  // A basic example for 'click' event.
	  // Useful for 'Download' link on your site.
	  //
	  $('a[href*="downloadedFile"]').on('click', function() {

	    /*
      This is the basic API call:
	    ga('send', 'event', [eventCategory], [eventAction], 
         [eventLabel], [eventValue], [fieldsObject])
      
	    Event fields
	    ============
	    * eventCategory	- text - Typically the object that was 
        interacted with (e.g. 'Video')
	    * eventAction	 - text	-	The type of interaction (e.g. 'play')
	    * eventLabel - text	- Useful for categorizing events (e.g. 'Fall Campaign')
	    * eventValue - integer - A numeric value associated with the event (e.g. 42)
	    */
	    ga('send', 'event', 'file', 'download-10', "downloadLabel", 1);

	    // simple way to show the user we sent the event
	    $("#status").html("We just sent the download event to GA.<br> You should see it tracked under Real Time -> Events");
	  });
	});