Question

我想跟踪有多少人点击该按钮，会话将在Google Analytics中收集。但是，我无法在Google Analytics Events中获得任何结果。我的代码如下：

<script>
          function handleOutboundLinkClicks(event) {
  ga('send', 'event', {
    eventCategory: 'Outbound Link',
    eventAction: 'click',
    eventLabel: event.target.href,
    transport: 'beacon'
  });
}

      </script>

//// 我按钮的代码如下：

<input type="submit" id="submit" value="Validate and Submit" onclick=”_gaq.push([‘_trackEvent’, ‘form, ‘submit’, ’order sent’, 10]);”/>

然后是这个页面的整个代码：

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Keepsake Florals</title>
    <!--link to external css file-->

<link rel="stylesheet" type="text/css" href="keepsakeflorals.css"/>
<link rel="stylesheet" type="text/css" href="ksform.css" />
<link rel="shortcut icon" href="favicon.ico" />
   <script src="scripts/jquery-1.11.3.min.js"></script>




      <script>

      function handleOutboundLinkClicks(event) {
  ga('send', 'event', {
    eventCategory: 'Outbound Link',
    eventAction: 'click',
    eventLabel: event.target.href,
    transport: 'beacon'
  });
}

      </script>



</head>
<body>

<div id="box">
<h1><a href="index.html" title="click here to return home"> KEEPSAKE FLORALS </a> </h1>
</div>

<div>
<nav id="mainnav"> 
<a href="index.html"> Home</a> |
<a href="aboutus.html"> About Us  </a> |
<a href="flowers.html"> Flowers </a> |
<a href="order.html"> Order </a> |
<a href="review.html"> Review </a> |
</nav>
</div>



<form action="thankyou.html" id="contact-form">

  <fieldset id="contactinfo">
  <legend> <span> Contact Information </span> </legend>
    <label> 
    Name
    <input type="text" name="name" id="nameinput" placeholder="First and last name"  />
    </label>
      <label>
      Email
      <input type="email" name="email" id="emailinput" placeholder="address@example.com" />
      </label>
      <label>
      Phone
      <input type="text" name="phone" id="phoneinput" placeholder="phone number" />
      </label>

     </fieldset>

        <fieldset id="orderflower">
          <legend> <span> Flowers to order </span> </legend> 
          <label for="mother" >
             <input type="radio" name="flower" id="mother" value="mother" checked="checked"  />
             Mother's day flower 
             </label>
                 <label for="father">
                         <input type="radio" name="flower" id="father" value="father" />
                        Fathers day flower
             </label>
                     <label for="otheroccasion">
                    <input type="radio" name="flower" id="occasion" value="occasion"  />
                    Other occasion flower
                            </label>

             <label for="valentinesday">
                 <input type="radio" name="flower" id="vday" value="vday" />
                  Valentine's Day
                  </label>

             <label for="others">
                <input type="radio" name="flower" id="others" value="others"  />
                  Others

                  <input type="text" name="other" id="otherinput">
                  </label>    
              </fieldset>
          <fieldset id="delivery">
          <legend> <span> How to contact you ? </span> </legend>
          <label for "question">
              <input type="radio" name="flower" id="phone"  />
                 Via my handphone number
                 </label>
                  <label for "question">
              <input type="radio" name="flower" id="email"  />
                 Via my email
                 </label>


          </fieldset>
          <fieldset id="helpneeded" >

          <legend> <span> Any help needed? </span> </legend> 
          <textarea id="helpneeded" name="helpneeded" rows="4" cols="20"> </textarea>
          </fieldset>    
           <input type="submit" id="submit" value="Validate and Submit" onclick=”ga('send', 'event', 'form', 'submit', 'order sent', 10);”/>
</form>
</body>
</html>

Answer 1

有一些问题：

您将已弃用的经典GA语法与新的Universal Analytics语法混合使用。 UA不再使用_gaq对象。您的onclick代码应为：
```
ga('send', 'event', 'form', 'submit', 'order sent', 10);
```
请注意，您还有巧妙的报价和直引号。你应该直接使用引号。
您已经定义了一个似乎与按钮无关的函数handleOutboundLinkClicks，因此当您点击按钮时，您将看不到Outbound link事件。

但是对于所有意图和目的，我发布的代码应该适用于您的按钮，如果这是您的主要关注点。

Answer 2

这有点晚了，但我希望这可以帮助那些登陆这个问题的人。

您的问题很可能是因为Google Analytics Javascript代码会在您的表单提交后停止执行并加载新页面（thankyou.html）。您有两种选择：

使用transport属性并将其值设置为beacon：

ga('send', 'event', 'form', 'submit', 'order sent', 10, {
    transport: 'beacon'
});

对于不支持beacon传输方法的浏览器，您可以使用回调函数：

在HTML中，修改提交按钮（删除onclick属性）：

<input  type="submit" id="submit" value="Validate and Submit" />

然后，向此提交按钮添加一个事件监听器：

var form = document.getElementById('contact-form');

form.addEventListener('submit', function(e) {
    e.preventDefault(); //prevent the form from submitting immediately

    //Send the event to Google Analytics, and then manually
    //submit the form
    ga('send', 'event', 'form', 'submit', 'order sent', 10, {
            hitCallback: function() {
                form.submit(); //submit the form now
            }
    });
});

参考文献：

通过onclick按钮进行Google Analytics事件跟踪

2 个答案: