Google Analytics collect data of Age & Gender by submiting Magento form

Question

Google Analytics provide a feature that can analyze "Age" & "Gender" of visitors. But my customer want to track these data by submiting a form after checkout successfully.

That form looks as follow:

<form id="form-checkout" class="form-success" method="post"  action="">
        <ol class="fs-fields">
          <li class="gender">
            <label><?php echo $this->__('Gender') ?></label>
            <div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
              <span><input type="radio" name="gender" value="Male" /><label><?php echo $this->__('Male')?></label></span>
              <span><input type="radio" name="gender" value="Female" /><label><?php echo $this->__('Female')?></label></span>
            </div>
          </li>
          <li class="ages">
            <label><?php echo $this->__('Ages') ?></label>
            <select name="ages">
              <option value="< 20"><?php echo $this->__('< 20') ?></option>
              <option value="20-35"><?php echo $this->__('20-35') ?></option>
              <option value="35-50"><?php echo $this->__('35-50') ?></option>
              <option value="> 50"><?php echo $this->__('> 50') ?></option>
            </select>
          </li>
        </ol>
        <div class="button-box">
          <button class="fs-submit fs-show" type="button" title="<?php echo $this->__('submit') ?>" onclick="sendDataToUa();"><span><?php echo $this->__("Back to Home")?></span></button>
          <button class="fs-submit fs-show" type="button" title="<?php echo $this->__('Continue Shopping') ?>" onclick="window.location='<?php echo $this->getUrl() ?>'"><span><?php echo $this->__('Continue Shopping') ?></span></button>
        </div>
      </form>

Js script:

<script type="text/javascript">
  function sendDataToUa(){
    var gender = jQuery('input[name=gender]:checked', '#form-checkout').val();
    var ages = jQuery('#form-checkout option:selected').val();
    ga('set', 'dimension1', gender);
    ga('set', 'dimension2', ages);
    ga('send', 'pageview', {
      'dimension1': gender,
      'dimension2': ages,
    });
  }
</script>

UPDATE: I'm waiting for report data on google analytics.

Answer 1

To get started on customer attributes of the dropdown variety:

how to create drop down attributes for customer

However, do you need to tie that information in to Magento when it is only needed on GA? You don't have to save the data in the backend for the age range.

For gender you might want to just collect people's title, e.g. Mr, Ms, then have a hidden form element with your Google-friendly gender field. Then people aren't going to be irritated by being asked their gender (a minor obstacle to purchase but one nonetheless). With the 'salutation' field (title) you just need to enable it in sys config.

With that done you can then have a js script in your form to observe onchange or onblur with the title element, then a couple of 'if' statements to update your hidden 'google only' form element.

Sorry I haven't posted any code for this yet, however, I am thinking of implementing roughly the above because I have wanted to capture that information for a while and did not see how to do it easily with GA until I saw your question.