本帖最後由 Leeker 於 2014-3-18 08:27 編輯 ' X% d( F9 ^; z0 ~9 P2 r7 g2 d
3 q7 n1 q* X" c- G
剛看見的，轉載的，覺得挺有用的，給大家分享下，以免閒話，大家搜一下標題就能找到原鏈接
) ~( H3 _' Y& h- Z2 g, L$ o$ u' F" J, t5 T
GTM簡介
1 q/ q5 o" m- R3 e' z8 {
# [5 Z$ @- I- v, ~, a# k4 D相信大部分剛接觸這個工具的人會跟我一樣丈二和尚摸不著頭腦，經過一段時間的摸索，我簡單跟大家介紹一下這玩意到底是個怎麼回事。3 N3 A* s$ e! E- r6 U2 x
- 我們並不能直接通過這個工具來查看統計到的數據，它只是輔助我們更好地去捕捉數據
- 非常高的自定義程度，幾乎可以說網站上的任何行為我們都可以通過設置tag來捕捉到
- 使用tag manager，在很多場景下我們不必改動任何網站上的代碼來實現各種事件的統計
- 使用tag manager捕獲到的數據還是需要在其他的工具裡查看，比如Google Analytics
& g2 w. H3 _5 D4 n3 `1 a* o
背景知識先瞭解這麼多，更多的好處大家可以去http://www.google.com/tagmanager/去看官方的介紹。這篇文章主要通過介紹如何設置鏈接點擊事件統計來讓大家簡單瞭解下Google Tag Manager是如何工作的。
1 G9 l, S! T# q' A5 P" m. Z% j首先回答一個很多人可能會提的問題：Google Analytics已經可以通過添加onclick=」_gaq.push(['_trackEvent', 'Category', 'Action', 'label']); 「代碼來很方便地實現鏈接點擊事件的統計，為什麼我們還要去折騰Google Tag Manager?+ G k& p7 w5 _
就統計點擊事件這個簡單的目的來說，使用Google Tag Manager的方便性在於，我們可以不在網站上添加任何多餘代碼，僅僅通過匹配元素的id, class, url或者其他東西來實現對目標鏈接的點擊統計。更方便的地方在於，我們通過設置一個tag，可以實現對多個甚至整站的鏈接的統計。下面進入正題。
7 A% |; q3 d3 z# C9 f" J5 s( r
, |0 h0 X* R* J/ b4 }( G5 I% F8 R4 x/ L7 y4 U1 p5 u6 q- S. ]2 W; w
使用GTM實現對於鏈接點擊的事件統計
5 \- r1 n. R$ r. ]* T
7 q3 [- R( u, z7 |! \要實現鏈接事件的統計，我們有2種方法。: B* V+ c8 x4 M: o: `. y
第一種和GA類似，通過在鏈接上添加代碼來實現，當然，添加的是tag manager代碼，不過這種方法我不推薦。如果還需要手動在鏈接上添加代碼，我們何必不直接用GA呢？& f: X6 E5 b1 R7 n$ w# r$ C
第二種就是這篇文章要介紹的，不在鏈接上手動添加代碼，僅僅通過在Google Tag Manager後台進行設置來達到統計鏈接點擊事件的目的。下面的詳細的操作步驟。5 [; F# C, J. ]3 D
k1 T, s' B/ ]- k1 E
1 x! Q: H- d# O3 F# E
一，到http://www.google.com/tagmanager/開通功能，直接使用Google賬號登陸即可。然後添加新賬號並添加新的容器(container)。我個人使用經驗是一個網站對應一個容器即可，不用每個網站都開通一個新賬號。
2 n' O3 b4 R: c s) H3 J" X* }5 e- \& \) H) b) h
' i1 m' `0 [- ?; U" n2 F- k) g9 H( \; x
0 W, o! f, D6 z+ I3 X3 z二，容器添加完成後，會得到這樣一段代碼，把這段代碼放在網站所有頁面的<body>部分的開頭。7 w4 y5 \" Q2 n4 [8 S- W, R
% z# w4 ~1 Z9 Y& D+ \3 r( i" \6 L |* X! E4 [- F: A$ Q) z9 r: C: a) x
/ p0 W) m$ e" @* k$ g3 d: X- Q+ T; e0 J1 R8 l
三，添加一個Google Analytics標籤
" \$ p+ ]% V X# m4 v* |# ~# |& `0 ~% ^. _) Z
3 v. l: J2 u$ S
) ]' L$ I. Y+ r
選擇「Tag」，然後按照下圖進行設置。由於這個網站依然使用的是老版的GA代碼，不是新版的Universal Analytics，所以在Tag Type中我選擇「Classic Google Analytics」。如果你使用的是Universal Analytics，那麼就選擇「Universal Analytics」。
: X, \% l! ]" j5 Q* t/ M; J4 z9 }9 ^, O; k# v K& Q- e6 L, F3 @
6 X/ u# R$ ~7 p; n" o0 H
$ q/ w4 O5 m7 ~) T5 W" H* s! Q5 z. Q8 X$ B( W/ Z8 Q, H
設置完成後點擊保存。
5 M; A3 i7 E6 f$ u% x+ s8 {; y0 l0 b8 C1 t* p
: o3 X1 Q3 J# O# s4 w% W四，添加一個「鏈接點擊監聽」標籤，設置如圖
" D8 d$ p# d3 ? i
p2 C0 A g6 Q4 e8 k
' B6 e, s+ s+ \5 m; u3 ^1 d+ Y; A6 F9 q3 ?6 U
數值默認是2000，我自己改成了500。然後先別忙著保存，在右側我們需要添加tag觸發規則。Rule的設置如下圖。& `1 d0 L! ~; w; @2 Q+ [
3 L- V/ V. {+ B, P. E- a; \# b" Q3 K
1 e6 t% }7 f. x0 t1 Y9 ?- r# b y d- l& t+ F
這個Rule的含義就是在所有頁面添加一個鏈接點擊的監聽器。- O6 g+ Y$ [# V) z/ A7 D# N
, s5 M# Y. _5 A I- b ^
8 L8 |) ]6 e( E( v7 R1 ^% t
五，添加具體要統計哪些鏈接上的點擊的Tag，比如我們需要統計下載鏈接的點擊次數，我們就需要這樣設置，還是見圖片。- }( t0 \1 I- Z6 i3 _
0 i5 e3 {/ S$ p5 Z+ ^! N9 B
$ R# s7 ^0 h5 ?& O: L& ]
2 R' l( G3 x6 v, GTag Name大家自定義，然後Category, Action, Label大家都可以自定義。需要說明的是，圖中的Label這一欄，我使用的是Google Tag Managet內置的Macro，{{element url}}也就是這個鏈接的url地址，還有很多其他的內置macro，大家可以慢慢探索。6 Q# \4 K! K- w* W# C
) m& T+ O- d) l6 H4 g7 |
3 m% R" F) ]5 o4 t, x1 P! K然後我們同樣需要添加一個觸發此tag的rule。6 t+ e2 d- ?7 a6 R
5 l. }+ E3 B& v: j \7 m
. h, d8 [- S/ p9 M q( ^1 Z
) J; [4 A" `! N0 d4 S
Rule Name大家自定義，第一個條件」{{event}} equals gtm.linkClick」是標準，必須要這樣寫才行。第二個條件是」{{element url}} contains download.xxxx.com」，這個並不是標答，大家可以自定義。我這樣寫的原因是我網站上下載鏈接都放在download子域名下，而且不會有非產品下載鏈接含有download.xxxx.com字符，所以我這樣不會引起數據上的錯誤統計。1 O" b$ r/ P# {7 [6 p" |
" o* Z; | s/ J8 w
. x6 D) m# T! V! e. r! ~" ~- w設置完成後同樣點擊保存。至此我們就完成了所有tag的添加。! p6 |6 T2 H- p D# B3 H1 v) l' L
# a3 [1 }' G7 @6 Q+ }) F
9 l0 G$ r: \! E4 e! Y; m
六，創建版本並發佈。先點擊」Create Version」，再點擊」Publish」
& @! A! v4 U' f; B8 |% g7 d+ X Y; A3 _ q. e: t) L, K
6 U Z: m4 g/ M W( T, S1 J
; g- p+ O0 u5 \6 F- N. `進入網站後，初始狀態下我們應該看到這樣的狀態。
2 d) \3 F. E6 n0 E8 |% i
/ ?3 @2 I+ W+ y6 ~8 S9 A3 Q
, }. }: H: j8 b e+ q
p8 P, `0 B9 k& N然後我們點擊目標鏈接，也就是我們想要統計點擊事件的鏈接，狀態應該會變成下圖這樣。* ^0 a$ m! _3 _
7 A) U8 f7 g, _. U' }7 r
6 r' v, v- m1 I( }- V/ h. k
1 \- G+ D+ f, j" f" h
3 C2 y" _( g/ n/ k如果大家的結果也是這樣，那麼恭喜，你也設置成功了，等著去 GA的Event報告裡面看相應事件吧。9 k% b) g: B# s+ [0 P. ~
8 n. a7 v0 |% _+ M6 Z2 u: y9 ]( i8 A& l* z, t3 X
Conclusion
% Y* E; b. N$ t: l: @7 b# ?3 ^9 r% R# N
有心人可以從圖片看到我也沒設置太多Tag，一是這個網站是我拿來練手的，不是什麼大站，沒太多數據需要統計。二是我也剛用2周，還沒有達到大師境界。三是最近在著手主站的改版，重構成響應式佈局，也沒太多功夫來弄這個。不過Google Tag Manger肯定是我未來數據統計的重要工具。' @4 Z |4 O# M$ b5 Q, y) }
' ]7 O$ n- I: v1 C; V! I
圖片都轉過來了，還是，英文要好才是重要的。
0 d# c/ G+ O# N8 b2 J1 V2 l- `" h" ~
0 R* K% e$ O6 b. F, ?5 d# W1 y( E) r. ~
' E$ n3 a0 u$ [' ?: j& w, r' a
" e5 C: O- H) Z# y |
發表於 2014-3-18 08:26:13
提升卡
沉默卡
变色卡
這個不錯 蠻好的