Ajaxでの動作をGoogle Analyticsでカウントしたい。

前提・実現したいこと

Google Analyticsにて非同期（Ajax）の動きを検出したいです。
そもそもGoogle Analyticsを使うべきなのかどうかについても疑問が残るため、ご教授いただけると幸いです。
今現在は、「#」を付けることによって、それをGAに飛ばす形をとっていますが、非同期通信の成功問わずにアナリティクスに表示してしまうことから、Ajaxの成功時のみGAへ飛ばすといった設定をしたいと考えています。

ファイルは全て、ディレクトリ分けを行わず、一覧で見えるような形で設置しています。

該当のソースコード

index.html

html
1<!-- index.html -->
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>Document</title>
7    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
8
9    <!-- Global site tag (gtag.js) - Google Analytics -->
10    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-143342490-1"></script>
11    <script>
12      window.dataLayer = window.dataLayer || [];
13      function gtag(){dataLayer.push(arguments);}
14      gtag('js', new Date());
15
16      gtag('config', 'UA-143342490-1', {'page_location': location.href});
17    </script>
18
19    <script>
20      $(function() {
21        $('#button1').click(
22          function() {
23            $.ajax({
24              url: 'sample2.html',
25              dataType: 'html',
26              success: function(data) {
27                $('#text').html(data);
28              },
29              error: function(data) {
30                alert('error');
31              }
32             });
33          }
34        );
35        $('#button2').click(
36          function() {
37            $.ajax({
38              url: 'sample3.html',
39              dataType: 'html',
40              success: function(data) {
41                $('#text').html(data);
42              },
43              error: function(data) {
44                alert('error');
45              }
46             });
47          }
48        );
49        $('#button3').click(
50          function() {
51            $.ajax({
52              url: 'sample4.html',
53              dataType: 'html',
54              success: function(data) {
55                $('#text').html(data);
56              },
57              error: function(data) {
58                alert('error');
59              }
60             });
61          }
62        );
63      });
64    </script>
65
66  </head>
67  <body>
68    <a href="#button1">
69      <input type="button" id="button1" value="button1"/>
70    </a>
71    <a href="#button2">
72      <input type="button" id="button2" value="button2"/>
73    </a>
74    <a href="#button3">
75      <input type="button" id="button3" value="button3"/>
76    </a>
77    <br/>
78    <div id="text"></div>
79  </body>
80</html>
81

samplel2.html

html
1<!-- sample2.html -->
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>CSS overflow</title>
7
8  </head>
9  <body>
10    <p>サンプルページ2です。</p>
11  </body>
12</html>
13

他、sample3.html , sample4.htmlは、sample2.htmlと同じファイルです。（<p>～</p>内だけ変えています。）

試したこと

以下HTMLの一部を書き足して、index.htmlの<a>タグを削除して#タグが表示されないようにしてみましたが、アナリティクスでカウントは出来ませんでした。

HTML
1<script>
2$(function() {
3  $('#button1').click(
4    function() {
5      $.ajax({
6        url: 'sample2.html',
7        dataType: 'html',
8        success: function(data) {
9          $('#text').html(data);
10          // 以下を記載
11          ga('send', 'GAのトラフィックID', '/sample2.html');
12        },
13        error: function(data) {
14         alert('error');
15       }
16      });
17   }
18  );
19});
20</script>
21