回答編集履歴
3
修正
answer
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
ただ、リンク別に埋め込まなきゃいけない項目がありますが、
|
|
3
3
|
全てにga()を埋め込むより楽なはず（たぶん）
|
|
4
4
|
|
|
5
|
+
# 全てのaのクリックを拾い、非対称リンクはフラグで判断する
|
|
5
6
|
```html
|
|
6
7
|
<a href="#" data-category="category01"
|
|
7
8
|
data-action="action01"
|
|
@@ -30,7 +31,6 @@
|
|
|
30
31
|
var non = $(this).data("non");
|
|
31
32
|
|
|
32
33
|
ga('send', 'event', category, action, label, value, {'nonInteraction': non});
|
|
33
|
-
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
36
|
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
ga()を入れたくないaもあるケースも加味し、data-gaとしてフラグを持たせました。
|
|
42
42
|
|
|
43
|
+
# 対象のaには特定のクラスを付与する
|
|
43
44
|
もし対象のaが決まっているのであれば適当なクラス名を対象のaに付与し、下記のようにしても良いと思います。
|
|
44
45
|
```html
|
|
45
46
|
<a href="#" data-category="category01"
|
|
@@ -58,17 +59,23 @@
|
|
|
58
59
|
```
|
|
59
60
|
```javascript
|
|
60
61
|
$("a.hoge").on("click", function() {
|
|
62
|
+
var category = $(this).data("category");
|
|
63
|
+
var action = $(this).data("action");
|
|
64
|
+
var label = $(this).data("label");
|
|
65
|
+
var value = $(this).data("value");
|
|
66
|
+
var non = $(this).data("non");
|
|
61
67
|
```
|
|
62
|
-
※この場合は「対象のリンクのみ」という縛りが最初から入りますのでga()利用を判断するdata-gaの設定と取得・if文部分は不要
|
|
68
|
+
※この場合は「対象のリンクのみ」という縛りが最初から入りますのでga()利用を判断するdata-gaの設定と取得・if文部分は不要となります。
|
|
63
69
|
|
|
64
|
-
追記：
|
|
70
|
+
# 追記：data属性を1つにまとめる
|
|
71
|
+
|
|
65
72
|
data属性が何個も出てきて冗長に感じるのであれば、1つにまとめてセパレータをかますのもありです。
|
|
66
73
|
```html
|
|
67
74
|
<a href="#" data-info="category01|action01|label01|value01|1" class="hoge">テキスト1</a>
|
|
68
75
|
```
|
|
69
76
|
```javascript
|
|
70
77
|
$("a.hoge").on("click", function() {
|
|
71
|
-
var info= $(this).data("info").split("
|
|
78
|
+
var info= $(this).data("info").split("|");
|
|
72
79
|
var category = info[0];
|
|
73
80
|
var action = info[1];
|
|
74
81
|
var label = info[2];
|
2
追記
answer
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
```html
|
|
6
6
|
<a href="#" data-category="category01"
|
|
7
|
-
data-category="category01"
|
|
8
7
|
data-action="action01"
|
|
9
8
|
data-label="label01"
|
|
10
9
|
data-value="value01"
|
|
@@ -13,7 +12,6 @@
|
|
|
13
12
|
<a href="#" data-ga="0">テキスト2</a>
|
|
14
13
|
|
|
15
14
|
<a href="#" data-category="category02"
|
|
16
|
-
data-category="category02"
|
|
17
15
|
data-action="action02"
|
|
18
16
|
data-label="label02"
|
|
19
17
|
data-value="value02"
|
|
@@ -45,7 +43,6 @@
|
|
|
45
43
|
もし対象のaが決まっているのであれば適当なクラス名を対象のaに付与し、下記のようにしても良いと思います。
|
|
46
44
|
```html
|
|
47
45
|
<a href="#" data-category="category01"
|
|
48
|
-
data-category="category01"
|
|
49
46
|
data-action="action01"
|
|
50
47
|
data-label="label01"
|
|
51
48
|
data-value="value01"
|
|
@@ -54,7 +51,6 @@
|
|
|
54
51
|
<a href="#" >テキスト2</a>
|
|
55
52
|
|
|
56
53
|
<a href="#" data-category="category02"
|
|
57
|
-
data-category="category02"
|
|
58
54
|
data-action="action02"
|
|
59
55
|
data-label="label02"
|
|
60
56
|
data-value="value02"
|
|
@@ -63,4 +59,20 @@
|
|
|
63
59
|
```javascript
|
|
64
60
|
$("a.hoge").on("click", function() {
|
|
65
61
|
```
|
|
66
|
-
※この場合は「対象のリンクのみ」という縛りが最初から入りますのでga()利用を判断するdata-gaの設定と取得・if文部分は不要です。
|
|
62
|
+
※この場合は「対象のリンクのみ」という縛りが最初から入りますのでga()利用を判断するdata-gaの設定と取得・if文部分は不要です。
|
|
63
|
+
|
|
64
|
+
追記：
|
|
65
|
+
data属性が何個も出てきて冗長に感じるのであれば、1つにまとめてセパレータをかますのもありです。
|
|
66
|
+
```html
|
|
67
|
+
<a href="#" data-info="category01|action01|label01|value01|1" class="hoge">テキスト1</a>
|
|
68
|
+
```
|
|
69
|
+
```javascript
|
|
70
|
+
$("a.hoge").on("click", function() {
|
|
71
|
+
var info= $(this).data("info").split("1");
|
|
72
|
+
var category = info[0];
|
|
73
|
+
var action = info[1];
|
|
74
|
+
var label = info[2];
|
|
75
|
+
var value = info[3];
|
|
76
|
+
var non = info[4];
|
|
77
|
+
|
|
78
|
+
```
|
1
修正
answer
CHANGED
|
@@ -41,7 +41,26 @@
|
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
ga()を入れたくないaもあるケースも加味し、data-gaとしてフラグを持たせました。
|
|
44
|
+
|
|
44
45
|
もし対象のaが決まっているのであれば適当なクラス名を対象のaに付与し、下記のようにしても良いと思います。
|
|
46
|
+
```html
|
|
47
|
+
<a href="#" data-category="category01"
|
|
48
|
+
data-category="category01"
|
|
49
|
+
data-action="action01"
|
|
50
|
+
data-label="label01"
|
|
51
|
+
data-value="value01"
|
|
52
|
+
data-non="1" class="hoge">テキスト1</a>
|
|
53
|
+
|
|
54
|
+
<a href="#" >テキスト2</a>
|
|
55
|
+
|
|
56
|
+
<a href="#" data-category="category02"
|
|
57
|
+
data-category="category02"
|
|
58
|
+
data-action="action02"
|
|
59
|
+
data-label="label02"
|
|
60
|
+
data-value="value02"
|
|
61
|
+
data-non="2" class="hoge">テキスト3</a>
|
|
62
|
+
```
|
|
45
63
|
```javascript
|
|
46
64
|
$("a.hoge").on("click", function() {
|
|
47
|
-
```
|
|
65
|
+
```
|
|
66
|
+
※この場合は「対象のリンクのみ」という縛りが最初から入りますのでga()利用を判断するdata-gaの設定と取得・if文部分は不要です。
|