Local blog for Japanese speaking developers
analytics.js 向け Autotrack のご紹介
2016年3月8日火曜日
[この記事は
Philip Walton
、デベロッパー プログラム エンジニアによる Google Developers Blog の記事 "
Introducing Autotrack for analytics.js
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]
Google Analytics 公開当初の頃と比べ、ウェブは大きく変化しました。当時は、ほとんどのウェブサイトは個別ページから構成されており、あるページから別のページに移動するためには、リンクをクリックしてページ全体をリクエストする必要がありました。そのため、ほとんどのサイトでは、
JavaScript のトラッキング スニペット
が 1 つあれば、大多数のユーザーの操作を追跡できました。
しかし昨今のウェブは、当時に比べるとずっと複雑で変化に富んだものになっています。旧来の静的なウェブサイトだけでなく、機能満載のウェブ アプリケーションも存在します。ユーザーが実行する操作は、リンクのクリックやフォームの送信に限定されなくなり、「ページビュー」も、必ずしもページ全体を読み込むとは限らなくなっています。
ウェブがこのように変化を遂げる一方で、アナリティクスの実装はさほど変わっていません。Google Analytics ユーザーのほとんどは、デフォルトのトラッキング スニペットをコピーしてサイトのページに貼り付けるだけで満足しています。Google Analytics にはデフォルト以外の機能もたくさんあることは知っていながら、そういった機能を学ぶための時間はつい後回しになってしまうのです。
この問題への新たな解決策となるのが、analytics.js 向けの
Autotrack
です。Autotrack は、Google Analytics の機能を最大限に活用しますが、実装のための手作業は最小限で済みます。このツールは、今日のモダンなウェブのデータを追跡する基盤をデベロッパーに提供します。
機能
Autotrack ライブラリは、analytics.js プラグインの集合体であるため、ライブラリ全体をそのまま利用することも、必要なプラグインのみを選んで使用することも簡単にできます。以下のセクションでは、Autotrack が実現する機能をいくつか取り上げて説明します。
サイト外へのリンクとフォームの追跡
あるサイトで、ユーザーが別のページを指すリンクをクリックすると、通常はそのページが開いた際にページビューが送信されます。一連のページビュー情報が存在しているため、Google Analytics はユーザーが(どのページから)どのページに移動したのかをバックエンドで判断できます。ただし、ユーザーがクリックしたリンク先やフォームの送信先が外部ドメインだった場合、Google Analytics に対して個別に情報を提供しない限り、そのアクションは捕捉されません。
かつては、外部ドメインへのリンクやフォーム送信の追跡の実装は困難でした。ほとんどのブラウザでは、新しいページの読み込みを開始すると、現在のページ上の JavaScript の実行を停止するからです。Autotrack がこうした複雑な問題に対処するため、自由に外部ドメインへのリンクやフォーム送信の追跡が行えるようになります。
シングルページ アプリケーション上の URL の変更追跡
コンテンツを動的に読み込み、
History API
を使って URL を更新する
シングルページ アプリケーション
を構築している場合、デフォルトのトラッキング スニペットでは不十分です。デフォルトのトラッキング スニペットは、最初のページ読み込みだけしか追跡しません。たとえ、新しいコンテンツを問題なく読み込んだ際にページビューを送信するようにしても、まだ
厄介な問題
が発生する可能性があります。
Autotrack は History API を使用した URL の変更を自動的に検出し、それをページビューとして追跡します。トラッカーは更新された URL に同期されるため、それ以降のヒット(イベント、ソーシャル インタラクションなど)もすべて正しい URL に関連付けられます。
宣言型のイベント トラッキング
手作業で JavaScript のイベントリスナを書くよりも、明示的にイベントを HTML に追加する方が容易な場合があります。最も典型的な例は、単純なクリック イベントの追跡です。Autotrack では、マークアップにデータ属性を追加するだけでクリック イベントを追跡できます。
<button data-event-category="Video" data-event-action="play">Play</button>
ユーザーが上記のボタンをクリックすると、対応するカテゴリやアクションとともに、イベントが Google Analytics に送信されます(オプションでラベルや値も含めることができます)。
メディアクエリのトラッキング
最近は、ほとんどのサイトでレスポンシブ デザインが採用されており、ユーザーが使っているデバイスの画面サイズや機能に応じてページ レイアウトが更新されるようになっています。メディアクエリを使ってページの外観や機能を変更する場合、メディアクエリの情報を取得することが重要です。そうすることによって、有効になっているメディアクエリに応じて使用方法がどう変わるのかをより深く理解することができます。
Autotrack を使用すると、使用されるメディアクエリの値のセットを取得できます。この値のセットは、
カスタム ディメンション
経由で自動的に追跡されます。さらに、値が変化したことも追跡できます(メディアクエリを使ったトラッキングを実行する場合は、Google Analytics でカスタム ディメンションを設定しなければならないことに注意してください。設定のプロセスはほんの数分で済みます。また、設定の手順は
mediaQueryTracker プラグインのドキュメント
で説明されています)。
以上で説明した機能は、Autotrack で実現できる機能のほんの一部です。すべてのプラグインの一覧とその使い方の説明は、
Github にある Autotrack のドキュメント
をご覧ください。
Autotrack の利用効果が期待されるサイトとは
Autotrack は誰でも利用でき、どんなサイトにも効果がありますが、このライブラリは主に、現在のアナリティクスの実装をカスタマイズしておらず、ここまでで説明したような機能を利用したいサイトのために設計されています。
現在デフォルトのトラッキング スニペットだけを使用している場合、Autotrack の利用を検討してみる価値があるでしょう。Google Analytics の実装に既にカスタマイズを加えている場合は、まず
ドキュメント
を参照し、その実装と Autotrack の機能が衝突しないかどうか、二重にカウントされるデータがないかどうかを確認してください。
次のステップ
Autotrack を利用する際は、ドキュメントの
「使い方」のセクション
を参照してください。Autotrack がどのようなデータを捕捉するのかについて関心のある方は、
Google Analytics Demos & Tools
サイトを参照してください。このサイトは Autotrack を利用しており、このサイト自身に対して Google Analytics を実行したデータをグラフで表示しているページがあります。
さらに理解を深めたい場合は、Autotrack ライブラリを直接参照してください。これはオープンソースで、学習に役立つ、優れたリソースです。
プラグインのソースコード
にひととおり目を通せば、そこで analytics.js の高度な機能が多用されていることが理解できるでしょう。
最後に、この機能に関するフィードバックや提案があれば、遠慮なくお知らせください。バグや問題点は、
Github
から報告できます。
Posted by
Eiji Kitamura - Developer Relations Team
ラベル
.app
1
.dev
1
#11WeeksOfAndroid
13
#11WeeksOfAndroid Android TV
1
#Android11
3
#DevFest16
1
#DevFest17
1
#DevFest18
1
#DevFest19
1
#DevFest20
1
#DevFest21
1
#DevFest22
1
#DevFest23
1
#hack4jp
3
11 weeks of Android
2
A MESSAGE FROM OUR CEO
1
A/B Testing
1
A4A
4
Accelerator
6
Accessibility
1
accuracy
1
Actions on Google
16
Activation Atlas
1
address validation API
1
Addy Osmani
1
ADK
2
AdMob
32
Ads
73
Ads API
135
ads query language
2
ads scripts
2
ads search
1
advanced markers
1
Advanced Protection Program
3
AdWords API
25
adwords scripts
2
aerial view api
1
Agency
1
AI
20
AIY
3
AIY Vision Kit
2
ALPN
1
AMP
120
AMP Cache
9
AMP Camp
2
AMP CSS
1
AMP Extension
1
AMP Fest
1
AMP for Email
4
AMP Optimizer
1
AMP Packager
1
AMP Playground
1
AMP Plugin
1
AMP SSR
1
AMP Story
4
AMP Toolbox
1
amp-bind
1
amp.dev
1
AMPHTML Ads
1
Analytics
9
Andorid
12
Android
400
Android 10
1
Android 11
20
Android 11 Compatibility
1
Android 11 final release
1
Android 11 meetups
1
Android 9
1
android api
1
Android App Bundle
1
Android App Development
23
Android Architecture
1
Android Architecture Components
1
Android Auto
1
Android Design Support Library
1
Android Developer
14
Android Developer Story
4
Android Developers
13
Android Enterprise
6
Android for cars
2
Android Go
1
Android Jetpack
6
Android N
18
Android O
14
Android Open Source Project
1
Android P
7
Android Pay
1
android privacy
1
Android Q
13
Android Ready SE Alliance
1
android security
5
Android Security Year in Review
1
Android StrongBox
1
Android Studio
47
Android Studio 4.1
1
android study jam
1
Android Support Library
6
Android Things
15
Android Tools
2
Android TV
11
Android Vitals
4
Android Wear
29
android11
6
androidmarket
3
androidstudio
1
AndroidX
6
Angular
2
Angular 2
2
AngularJS
2
Announcements
2
Anthos
2
antmicro
1
AoG
1
aosp
1
API
28
APIExpert
45
apk
2
APM
1
app
3
App Action
1
App Bundle
2
app check
1
app engine
24
App Indexing
7
App Invites
6
App Maker
2
App modernization
1
AppCompat
2
Apps Flutter eBay
1
Apps Script
12
AppSheet
1
aprilfool
4
AR
3
Architecture Components
7
ARCore
3
ArtTech
1
asset-based extensions
2
assets
1
Associate Android Developer Certificate
1
Attribution Reporting
1
Audio
7
Auth Code
1
Authentication
9
AuthSub
2
Autofill
5
AutoML
1
Autotrack
2
award
1
Awareness API
1
basemap
1
basic-card
1
Beacons
6
bento
2
BERT
1
Best Practices
1
beta
4
Better Ads Standards
3
BigQuery
10
Billing
1
Biometrics
1
BLE
4
Blink
1
Blockly
1
blogger
1
BodyPix
1
bootcamp
1
Brillo
1
Brotli
2
Budou
1
budoux
1
Buildbetterapps
2
Business and Leadership
1
C++
1
Calendar
3
call ads
1
campaign
2
campaignsharedset
1
Campus
1
Canvas
1
Cardboard
4
Career
1
Case Studies
1
Case Study
3
CCPA
1
CDS 2020
3
CDS Recap 2020
3
Certificate
8
changestatus
1
chrome
261
chrome 98
1
Chrome Apps
1
Chrome Custom Tab
4
Chrome Dev Summit
5
chrome extension
14
Chrome for Android
2
Chrome for iOS
3
Chrome OS
10
Chrome Root Program
1
Chrome Root Store
1
Chrome Tech Talk Night
4
chrome103
1
chrome104
1
chrome108
1
chrome90
1
Chromebook
5
Chromecast
7
chromewebstore
9
Chromium
20
CLI
1
ClientLogin
3
Closure Compiler
1
Cloud
29
Cloud AI Platform
2
Cloud Firestore
5
Cloud Functions
9
Cloud IoT Device SDK
1
cloud messaging
1
Cloud ML Summit
1
Cloud Next
19
Cloud OnAir
5
Cloud OnBoard
4
Cloud PubSub
1
Cloud Run
1
Cloud Storage
1
Cloud Study Jams
3
Cloud Summit
1
Cloud Test Lab
2
Cloudflare
1
CNN
1
Coalition for Better Ads
2
CocoaPods
1
code review
1
codejam
5
codelab
5
Codepen
1
Colaboratory
1
Common Criteria
1
Community
7
compatibility
1
Compose
1
compose camp
1
compute engine
3
consent
1
Contests
1
Context
1
controls
1
Conversation API
1
conversations
2
conversion
1
Cookie
10
Coral
3
core web vitals
1
COVID-19
2
Crash Reporting
2
Crashlytics
3
cryptography
1
Custom Element
1
Custom Model
1
CWV
2
dark theme
1
Dart
2
data retention
1
DataCenter
1
datacloudsummit
1
Daydream
4
deck.gl
2
Deep Learning
4
Delegation
1
Demo Party
1
Design Patterns
1
Design Sprint
3
DesignBytes
1
Designer
1
DevArt
3
DevBytes
6
Developer
15
Developer Console
4
Developer Library
1
Developer Preview
6
Developer Relations
3
Developer Review
1
Developer Student Club
1
DEVELOPERS
1
Developers Story
4
DevFest
12
DevFestX
3
DevOps
1
devtools
4
Dialogflow
1
Differential privacy
2
Digital Asset Links
1
Digital Goods API
1
directions api
1
DirectShare
1
Discover
1
distance matrix api
1
DNS-over-HTTPS
4
Domain
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
DSA
1
DSC
1
DX
1
Dynamic Links
3
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
4
Edge
1
egypt
1
encoder
1
Encryption
1
English
2
environment api
1
Envoy
1
error
1
ES2015
1
ES2016
1
ES6
2
ES7
1
eta
1
Event
7
events
3
Explore
1
extensions
1
external
1
Featured
25
Feed
2
feed-based extensions
3
feeds
1
FIDO
7
filter
1
final release
1
Firebase
123
Firebase Admin SDK
6
Firebase Analytics
10
Firebase Auth
4
Firebase Cloud Messaging
10
Firebase Crashlytics
2
Firebase Database
5
firebase for games
1
Firebase Libraries
1
Firebase Notifications
1
Firebase Performance
3
Firebase Remote Config
6
firebase summit
1
Flash
1
FLEDGE
1
FLoC
2
Flutter
8
Flutter App Development
1
flutter3
1
font
3
fraud
1
G Suite
19
game
43
Game Developers Conference 2018
1
Game Developers Conference 2019
1
Game Development
1
gaming
1
gaql
8
Gboard
2
gc_datacloud
1
GCCN
1
GCP
17
GCPUG
1
GDC
1
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
22
GDG Cloud
1
gdsc
4
Gemini
5
Gemma
1
generative AI
4
Geo
55
Gingerbread
1
GLIDE
5
global foundries
1
Gmail
6
Gmail API
3
Go
1
Go Checksum Database
1
golang
5
goo.gl
1
Google
8
Google account
1
Google Analytics
4
Google API
2
Google Apps
14
Google Apps Script
4
Google Assistant
13
Google Assistant SDK
2
Google Binary Transparency
1
Google Cast
8
Google Chat
3
Google Cloud
49
Google Cloud Day
10
google cloud innovators
2
Google Cloud INSIDE Digital
2
Google Cloud INSIDE Games & Apps
9
Google Cloud INSIDE Media
1
Google Cloud INSIDE Retail
3
Google Cloud Messaging
11
google cloud next
4
google cloud next tokyo
3
Google Cloud Platform
16
Google Code-in
1
Google Dev Library
1
Google Developer Experts
2
google developer groups
1
google developer student clubs
1
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
2
Google Drive
6
Google Earth
1
Google Fit
2
Google for Games
3
Google for Mobile
2
Google for Startups
8
Google for Work
1
Google I/O
26
Google I/O 2024
3
Google Identity Services
6
Google Impact Challenge
1
Google Maps
72
Google Maps Platform
91
Google Meet
1
Google ML Summit
2
Google Open Source Peer Bonus
1
Google Pay
6
Google Photo
1
Google Play
148
Google Play App Safety
1
Google Play Billing
1
Google Play Console
15
Google Play developer distribution agreement
1
Google Play Developer Policies
2
Google Play Game Services
10
Google Play Instant
1
Google Play Services
23
Google Play Store
1
Google Play アプリ署名
1
Google Plus
14
Google Search
8
Google Sheets API
3
Google Sign-In
17
Google Slides API
5
Google Summer of Code
1
Google Tag Manager
1
Google Tensor
1
Google Trust Services
3
Google マップ
4
google_ads_api_v6
1
Google+
2
Googleapps
10
GoogleCloud
5
GoogleCloudDay
5
GoogleCloudInside
1
googlecloudlearn
1
googlecloudnext
2
GoogleGames
1
GoogleI/O
31
GoogleLabs
1
GooglePlay
3
GoogleTV
1
GPS
1
Gradle
1
Growth Academy
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
7
handson
1
Hangouts Chat
3
hardware
2
Hosting
3
hotel
1
How-To Guide
1
HTML5
17
HTML5Rocks
1
HTTP/2
5
HTTPS
19
I/O Extended
7
ID Token
1
Identity
18
Identity Toolkit
1
IGF2010
4
IGF2020
2
Ignite
4
Imagen 2
1
IME
12
Indie Game
7
Indie Games Festival
7
Indie Games Festival 2018
2
Indie Games Festival 2019
12
Indie Games Festival 2020
7
Industry Trends
1
Inevitable ja Night
30
Influence
1
innovators hive
2
Insights
1
Instagram
1
Instant Apps
6
intern
2
Invites
1
IO19
3
iOS
22
IoT
7
IPv6
1
Issue Tracker
2
IWD
1
Japanese
6
Japanese Developer
1
Japanese Input
1
java
1
JavaScript
13
Jetpack
5
Jetpack Compose
6
Journeys
1
K-12
1
Kaggle
1
Key Transparency
1
Knowledge Graph
1
Kotlin
25
Kotlin Android Extensions
1
kotlin api
1
Kotlin Beginners
3
Kotlin Vocabulary
2
Kubernetes
4
l10n
8
latest
18
latest news
1
launch
1
LaunchPad
2
Learn
2
lifull
1
Lighthouse
1
LINE
1
Local AI
1
Location
1
Lollipop
10
Machine Learning
32
MAD Skills
2
MADSkills
2
Maker Faire Tokyo
1
maps compose
1
maps embed api
1
Maps JavaScript API
5
maps on air
1
maps sdk
2
maps transportation
1
Marshmallow
10
Material
1
Material Design
31
MDL
2
MDN
1
MediaPipe
1
Messaging
1
metrics
1
MIDI
2
migration
1
mikan
1
Mixed Contents
4
ML
3
ML Kit
12
mlops
1
Mobile
16
Mobile Bootcamp
4
mobile optimized maps
1
Mobile Sites certification
1
Mobile Vision
4
mod_pagespeed
1
Model Maker
1
monetization
2
monetize
3
Mozc
15
Music
1
NativeDriver
2
NativeScript
1
Navigation
1
NBU
1
ndk
3
Nearby
5
News
1
Next Extended
1
Next Tokyo
4
Nexus
2
Nexus S
1
NFC
1
NIST
1
Node.js
3
notifications
2
Noto CJK
1
Now in Android
13
NPAPI
2
NPN
1
oauth
17
officehour
1
One Tap
2
online security
2
open silicon
2
open source
9
OpenAI
1
opencensus
1
opencloudsummit
1
OpenGL
4
OpenID
3
OpenID Connect
4
OpenSocial
1
opensource
20
OpenTitan
1
Optimization
1
OSV
1
p-max
3
Page Experience
1
passkey
3
Password Manager
4
Payment
8
Payment Handler API
1
Payment Request API
2
PDF
1
PEM
33
people
2
People API
3
Performance
16
Performance budget
1
performance max
1
Performance Monitoring
1
performance report
1
permissions
1
personalization
1
PersonFinder
1
Phishing
2
phone
1
photorealistic 3d tiles
1
Physical Web
3
Pi
1
Pixel
4
Place Picker
1
placements
1
places api
1
places SDK
1
Platform Stability
1
Play Billing
2
Play Billing Library
2
Play Console
2
Player Analytics
4
Playtime 2017
1
Policy
8
policy compliance
2
policy violations
2
polylines
1
Polymer
7
pricing
1
privacy
15
Privacy Sandbox
22
Progressive Web Apps
14
project hosting
1
Promise
2
Promo code
1
Protocol Buffers
1
PRPL
1
publicdata
1
Push API
1
Push Notification
6
PWA
4
Python
3
query builder
8
query validator
1
QUIC
2
quick builder
1
quick start widget
1
QWIKLABS
3
RAIL
1
raspberry pi
1
React
1
React Native
2
reactive programming
1
Realtime Database
9
Recap Live Japan 2019
3
reCaptcha
1
Redux
1
release
7
Remote Config
4
Remote Display API
1
Reporting API
1
Requirements
1
Resonance Audio
1
resource type
1
Rewarded Video Ads
2
RKP
1
rmf
2
routes api
3
RSS
1
Run on OS Login
1
Runtime Permission
1
Rust
2
Safe Browsing
4
safety
1
Sample Code
2
Santa Tracker
1
SBOM
1
schedule
1
schema
2
schema.org
1
Scorecards
1
script
2
SDG
1
sdk
1
search central
1
secur
1
Secure Element
1
security
92
selfie
1
Service Worker
4
SHA-1
1
Sigstore
4
silicon
3
Site Isolation
1
sketchup
1
skywater
1
SLSA
1
smart displays
1
smart home
1
smart shopping campaign
1
SmartLock for Passwords
5
social
4
Social Good
1
Social Media
1
software development
1
solution challenge
2
Solve
1
SPDY
3
speak2tweet
1
speaker
1
Spectre
2
speedometer
1
Spreadsheet
3
ssc
1
ssd
1
SSR
1
stable release
1
startup
7
Storage
3
store sales direct
1
story
2
streetview
3
Study Jams
12
subscriptions
5
sunset
10
Swift
2
SwiftShader
1
Symantec
1
tag
1
tapple
1
Task
4
Team Drive
1
techtalk
13
TensorFlow
43
TensorFlow Federated
1
TensorFlow Lite
8
TensorFlow Object Detection API
1
TensorFlow Probability
2
TensorFlow.js
4
test
4
Test Lab
6
TF Certificate
2
TFX
1
The Fast and the Curious
13
Titan M2
1
Titan Security Key
1
TLS
4
Topics
1
ToS
1
trace
1
Transliteration
1
Transparency
1
Trust
1
Trusted Web Activity
1
Trusty OS
1
TrustZone
1
Twitter
1
UA-CH
1
Udacity
20
Unity
3
update
1
usecase
1
User Agent string
2
UX
5
v10
2
v10.1
1
v11
1
v13
1
v15
1
v3
1
v4
1
v5
1
v6.1
1
v7
2
V8
5
v9
1
valuetrack
1
Verifiable Design
1
vertex ai
1
Vision AI
1
VP9
1
VR
11
Vulkan
2
wafer
1
Watch Face
2
wave
2
Wear OS
3
Weave
1
Web
38
Web Animations
1
Web Components
9
Web Manifest
2
Web Packaging
3
Web Stories
3
Web Story
3
Web Vitals
7
web.dev
1
WebAssembly
6
WebAuthn
1
WebGL
5
Webhook
1
WebM
1
WebMusic
5
WebRTC
1
WebView
1
Windows
1
Women in Gaming
1
Women Techmakers
1
Women Techmakers Scholars Program
1
WomenDeveloperAcademy
1
Wordpress
2
workmanager
1
WTM
8
Xcode
1
YouTube
18
YouTube API
1
youtube select
1
インタビュー
1
コードサンプル
1
サプライ チェーン
1
プライバシー
1
機械学習
3
言論の自由
1
節電
3
定期購入
1
東日本大震災
9
日本語入力
41
ブログ アーカイブ
2024
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2023
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2022
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2021
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2020
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2019
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2018
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2017
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2016
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2015
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
2014
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2013
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2012
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2011
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2010
12月
11月
Feed
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"