Html5-boilerplate: Gunakan Penyimpanan lokal untuk pelacakan Google Analytics jika tersedia

Meskipun saya tidak yakin apakah kita ingin mengunci Modernizr sebagai dependensi.

Mungkin akan lebih baik untuk menambahkannya ke docs ?

Juga, ping ke @mathiasbynens.

Terima kasih telah mengoptimalkan potongan, David. Sebagai @alrra, saya pikir kami baik-baik saja dengan menambahkannya ke dokumen.

Kredit itu bukan milik saya; ini menjadi perhatian saya oleh @elmerbulthuis. Meskipun saya tidak akan benar-benar menganggap ini sebagai pengoptimalan _snippet_ itu sendiri, per se --- ini lebih merupakan pengoptimalan web secara keseluruhan :-p.

Saya ingin tahu berapa banyak byte yang dapat disimpan, secara global, jika semua orang mengadopsi solusi localStorage .

Saya jelas penggemar berat solusi ini. Satu-satunya masalah dengan memasukkannya secara default di boilerplate adalah yang disebutkan @davidmurdoch : kita perlu menguji fitur untuk localStorage terlebih dahulu. Ini dapat dilakukan dengan menggunakan Modernizr atau dengan menambahkan sepotong kecil kode yang berdiri sendiri tetapi bagaimanapun juga itu akan sedikit meningkatkan ukuran halaman. Kemudian lagi, ini akan menghemat banyak byte dalam jangka panjang, karena tidak ada cookie yang akan dikirim di header permintaan untuk sumber daya apa pun di domain yang terpengaruh.

Sesuatu seperti ini:

(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
(function(){var a=(function(){var c=new Date,b;try{
localStorage.setItem(c,c);b=localStorage.getItem(c)==c;
localStorage.removeItem(c);return b&&localStorage}catch(d){}}());
ga('create','UA-XXXXX-X',a?{storage:'none',clientId:a.gaId}:{});
ga(function(b){a.gaId=b.get('clientId')});ga('send','pageview')}());

(Ini menggunakan uji fitur localStorage yang diambil dari http://mathiasbynens.be/notes/localstorage-pattern.)

Tampaknya berfungsi dengan baik setelah beberapa tes cepat. Saya akan membuat PR setelah menguji ini lebih ekstensif. (Bantuan selamat datang, tentu saja!)

FYI: ini berpotensi menghemat sekitar 33 byte mentah (header/cookie tidak dikompresi) per perjalanan pulang pergi untuk setiap permintaan ke domain yang terpengaruh.

@mathiasbynens ' solusi deteksi fitur sebaris saat ini adalah 130 byte terkompresi∗ lebih besar (jelas ini akan berbeda untuk setiap halaman unik, tetapi ini memberi kami gambaran kasar). Jadi, kita mungkin harus melihat apakah kita bisa bermain golf lebih jauh.

Saya pribadi ingin melihat perbedaan gzip hingga 65 byte dan akan mencobanya sendiri segera. :-)

_∗menggunakan deflator ini: http://www.vervestudios.co/projects/compression-tests/snippet-deflator_

318 byte GZIP (versi kami saat ini adalah 248 byte GZIP):

(function(l,e){GoogleAnalyticsObject='ga',(window.ga||(ga=function(l,e){(ga.q=ga.q||[]).push(arguments)})).l=+new Date,l=document.createElement('script'),l.src='//www.google-analytics.com/analytics.js',(e=document.getElementsByTagName('script')[0]).parentNode.insertBefore(l,e);ga('create','UA-XXXXX-X',(function(l,e){try{l=(localStorage[ga.l]=ga.l)==ga.l;localStorage.removeItem(ga.l);return l}catch(l){}}())?{storage:'none',clientId:localStorage.clientId}:{});ga(function(l,e){localStorage.clientId=l.get('clientId')});ga('send','pageview')}())

Ini tidak diuji dengan baik, jadi saya masih harus melakukannya. Tapi ini adalah permulaan.

Dan sayangnya, tes localStorage mungkin terganggu di beberapa browser di suatu tempat, karena saya menyingkirkan panggilan setItem dan getItem dan menggunakan beberapa "trik" golf lainnya.

Itu saja yang saya dapatkan untuk saat ini. :-)

Baru terpikir oleh saya bahwa kami telah meng-gzip cuplikan itu sendiri, yang agak tidak ada gunanya. Hasil Gzip bergantung pada sisa dokumen (yaitu sumber HTML jika dimasukkan dalam dokumen, atau sisa file JavaScript jika merupakan bagian dari satu dokumen). Mungkin membandingkan ukuran gzip hanya dari cuplikan bukanlah cara terbaik untuk mengukur ini?

Cuplikan Anda terlihat bagus. Tangkapan yang bagus menggunakan kembali stempel waktu ga.l alih-alih membuat yang baru!

Dan sayangnya, tes localStorage mungkin dikompromikan di beberapa browser di suatu tempat, karena saya menyingkirkan panggilan setItem dan getItem dan menggunakan beberapa "trik" golf lainnya.

Jika itu masalahnya, itu akan menjadi dealbreaker IMHO.

Kita dapat mengganti document.getElementsByTagName('script')[0] dengan document.scripts[0] jika dukungan Firefox < 9 tidak menjadi masalah lagi.

@mathiasbynens GZIP, hanya cuplikan yang akan memperkirakan penghematan _minimum_ byte dari kompresi. Jadi itu tidak sepenuhnya menjadi poin yang diperdebatkan. Di hampir semua kasus, rasio kompresi untuk cuplikan akan meningkat seiring dengan bertambahnya ukuran halaman.

Masih perlu diuji! Saya telah menambahkan kembali panggilan getItem dan setItem dan berhasil menurunkannya menjadi 309 byte:

+function(l,e){(ct=this[GoogleAnalyticsObject='ct']||function(l,e){(ct.q=ct.q||[]).push(arguments)}).l=+new Date,l=document.createElement('script'),l.src='//www.google-analytics.com/analytics.js',(e=document.getElementsByTagName('script')[0]).parentNode.insertBefore(l,e);try{localStorage.setItem(ct.l,ct.l),l=localStorage.getItem(ct.l)-ct.l,localStorage.removeItem(ct.l)}catch(l){};ct('create','UA-XXXXX-X',l?{}:{clientId:localStorage.clientId,storage:'none'}),ct(function(l,e){localStorage.clientId=l.get('clientId')}),ct('send','pageview')}()

• Saya sekarang menggunakan IIFE yang menggunakan tanda + alih-alih membungkus tanda kurung.
• Saya juga menggunakan localStorage.clientId alih-alih localStorage.gaId karena clientId menghemat beberapa byte.
• Menggunakan this alih-alih window menghemat 1 byte lagi (dikombinasikan dengan memindahkan tugas GoogleAnalyticsObject ).
• Mengubah ga menjadi ct (ct lebih umum) menyimpan satu byte lagi (ini mungkin tidak sepadan dengan kebingungan).
• Menyingkirkan panggilan fungsi dan menggunakan kembali l untuk pemeriksaan localStorage dengan menetapkannya ke 0 jika berhasil menghemat banyak byte.

Sekali lagi, ini membutuhkan lebih banyak pengujian.

@davidmurdoch Sudah ada pembaruan pada tes? Bisakah kita menuliskan alur pengujian untuk ini sehingga orang lain dapat membantu menguji?

Maaf saya pernah menjadi MIA, saya mendapat prioritas tinggi, proyek 6 bulan dan belum bisa mencurahkan banyak waktu untuk hal lain.

Cara termudah (dan paling bodoh) untuk menguji ini adalah dengan hanya mengganti kode analitik Anda dengan kode baru ini dan melihat apakah Anda mendapatkan fluktuasi aneh dalam jumlah dan versi browser. Saya telah melakukan ini sendiri dan belum melihat sesuatu yang menonjol. Namun, saya tidak memiliki banyak pengunjung oldie .

Cara lain adalah dengan memuat skrip analitik eksperimental ini dalam iframe yang dihasilkan (agar tidak mengganggu cuplikan analitik stabil) dan memanggil _trackPageview dari sana, di bawah akun GA yang berbeda, tentu saja. Maka Anda hanya perlu membandingkan data setelah sekitar satu minggu.

Saya tidak dapat menjanjikan bahwa saya dapat mengerjakan cuplikan drop-in untuk menguji ini dalam waktu dekat; jika orang lain ingin mengambil alih ide-ide ini sementara saya kembali bersembunyi, silakan saja. :-)

Saya baru saja memulai tes untuk http://drublic.github.io/css-modal/. Saya mendapat 97k tampilan halaman bulan lalu tetapi tersebar luas di browser.

Angka-angka:

1. Chrome 44,01%
2. Firefox 34,38%
3. Internet Explorer 8,86%
4. Opera 5,26%
5. Safari 4.01%
6. Peramban Android 2.22%

Kita lihat saja. Saya menjalankan statistik "normal" secara paralel.

Selain itu, saya pikir kode tersebut memerlukan beberapa pembaruan lagi untuk keterbacaan (80 karakter per baris dan di mana memasukkan pengidentifikasi).

Saya akan kembali ke tes ini dalam waktu sekitar seminggu.

Saya sedikit lebih awal tetapi temuan saya cukup stabil saat ini. Sayangnya saya melihat perbedaan besar dalam jumlah pengunjung untuk kedua akun.

Penerapan default menunjukkan 2.964 kunjungan unik untuk 13 hingga 17 Maret.
Penyimpanan lokal berbasis menunjukkan 756 kunjungan unik untuk jangka waktu yang sama.

Mungkin ada tiga kemungkinan alasan:

• implementasi potongan saya rusak
• memuat iframe diblokir oleh browser
• integrasi penyimpanan lokal dari potongan rusak

Saat ini saya tidak melihat kesalahan dalam kode saya di sini: http://drublic.github.io/css-modal/test-gau-localstorage.html (yang merupakan iframe yang telah terintegrasi di situs).

Saya juga belum pernah mengalami iframe diblokir oleh browser atau halaman. Adakah yang tahu jika ini mungkin terjadi?

Yang membawa saya ke solusi bahwa penyimpanan lokal yang dipotong GUA memiliki bug. Saya belum melihat apa masalahnya.
Bisakah kami mengembangkan varian yang tidak diperkecil untuk pengujian lebih lanjut dan meminimalkan setelah kami mendapatkan solusi yang berfungsi?

Saya juga akan memilih untuk menguraikan ini dari HTML5BP v5.0 dan merilisnya dengan 5.1 jika kami menemukan solusi. apa yang kalian pikirkan?

Saya juga akan memilih untuk menguraikan ini dari HTML5BP v5.0 dan merilisnya dengan 5.1

@drublic :+1: (menambahkan masalah ke tonggak v5.1.0 ).

Jika nomor Anda tidak aktif, itu mungkin fakta bahwa Anda harus menyediakan clientId default saat memanggil ga('create', w/ storage:'none' .

https://developers.google.com/analytics/devguides/collection/analyticsjs/domains#disableCookies

Baru saja membuat blog tentang masalah ini di situs saya, di sini: Google Async Analytics menggunakan LocalStorage dan siapkan halaman pengujian di sini: http://davidmurdoch.com/google-async-analytics-using-localstorage-test/.

Silakan baca, bagikan, dan uji.

(catatan: jika Anda menemukan kesalahan ketik atau kesalahan pada halaman tersebut, beri tahu saya di twitter @pxcoach .

Hei, maaf datang ke sini sedikit terlambat ke pesta. Saya bekerja di tim Google Analytics, dan saya ingin berkomentar dan menawarkan pemikiran saya tentang masalah ini.

Pertama-tama, menurut saya bukanlah ide yang baik bagi proyek H5BP untuk merekomendasikan cuplikan pelacakan Google Analytics yang secara fungsional berbeda dari yang direkomendasikan secara resmi. Orang mungkin akan menganggap mereka sama, dan jika sebenarnya tidak, itu akan menyebabkan kebingungan. Jika dokumentasi Google Analytics mengklaim GA mendukung beberapa fitur dan tidak karena seseorang menggunakan cuplikan yang berbeda, itu mungkin akan menyebabkan beberapa masalah yang cukup sulit untuk di-debug (terutama jika H5BP tidak menjelaskan bahwa cuplikan tersebut berbeda).

Jika ada sesuatu yang dapat dilakukan GA dengan lebih baik, kami akan senang untuk berkembang sesuai dengan kebutuhan komunitas daripada menyimpang darinya. (BTW, jangan ragu untuk melakukan ping atau cc saya pada masalah Github terkait GA.)

Bagaimanapun, inilah masalah utama dengan localStorage dan mengapa GA tidak menawarkannya sebagai mekanisme penyimpanan default:

localStorage dicakup ke location.origin sedangkan cookie dapat dicakup ke domain tingkat atas. Penyimpanan cookie memungkinkan analytics.js melakukan pelacakan subdomain di luar kotak, dan ini tidak akan mungkin dilakukan dengan penyimpanan lokal. Selain itu, jika bagian dari situs Anda adalah HTTP dan bagian lain adalah HTTPS, itu juga akan gagal (dan maksud saya, penyimpanan tidak dibagikan, jadi Anda akan kehilangan ID klien dan GA akan memperlakukannya sebagai sesi terpisah ). Meskipun benar bahwa ini bukan masalah bagi sebagian besar pengguna GA, saya masih berpikir akan buruk untuk menawarkan cuplikan yang diusulkan ini sebagai pengganti drop-in karena hilangnya fitur yang baru saja saya jelaskan.

Karena itu, berdasarkan masalah ini dan posting blog @davidmurdoch , kami akan mencoba memprioritaskan pembangunan mekanisme Penyimpanan lokal yang didukung secara resmi. Saat ini parameter storage hanya mendukung opsi cookie dan none , tetapi kami ingin menambahkan opsi localStorage ketiga, jadi pengguna yang tidak perlu subdomain atau pelacakan lintas-skema dapat ikut serta. Saya tidak tahu kapan ini akan ditambahkan, tetapi saya dapat memperbarui masalah ini ketika/jika ada.

Apakah ini tampak masuk akal bagi semua orang?

@philipwalton Terima kasih atas komentarnya!

Apakah ini tampak masuk akal bagi semua orang?

Cc: @davidmurdoch , @mathiasbynens

Karena itu, berdasarkan masalah ini dan posting blog @davidmurdoch , kami akan mencoba memprioritaskan pembangunan mekanisme Penyimpanan lokal yang didukung secara resmi.

:+1:

Harap perbarui masalah saat ini ditambahkan. Terima kasih!

@philipwalton , :+1: Berita bagus! Namun, Anda tidak perlu _mencoba_ untuk membuatnya, kami sudah melakukannya! :-p (Saya Nak, Saya Nak).

Saya akan melanjutkan dan memperbarui posting blog saya dengan berita ini, dan membuat repo GitHub dengan kode pelacakan localStorage tidak resmi, memastikan untuk menekankan kekurangannya. Terima kasih!

:+1: tetapi sepertinya web masa depan juga membutuhkan semacam topLevelStorage . Senang opsi akan tersedia. Dengan mengingat hal itu, dan ketika cuplikan masuk, apa yang mungkin menjadi preferensi untuk h5bp?

@jonathantneal , kami memiliki globalStorage di Firefox, yang melakukan penyimpanan lintas skema, port, dan sub-domain. Firefox adalah satu-satunya yang mengimplementasikannya, dan sejak itu ditandai sebagai usang. :-(

@davidmurdoch Terima kasih banyak telah membuka masalah ini dan menggalinya, kami sangat menghargainya!

@philipwalton Sekali lagi terima kasih telah bergabung dalam diskusi, dan seperti yang dikatakan @mathiasbynens , tolong terus perbarui kami!

dan buat repo GitHub dengan kode pelacakan Penyimpanan lokal tidak resmi, pastikan untuk menekankan kekurangannya.

Repositori @davidmurdoch adalah https://github.com/davidmurdoch/ga-localstorage(walaupun belum di update).

Saya baru saja menerbitkan skrip "Google Analytics using localStorage" ke npm: https://www.npmjs.org/package/ga-localstorage

https://github.com/davidmurdoch/ga-localstorage repo juga telah diperbarui dengan kode.

Halo, sudahkah Anda membaca komentar SO ini?

http://stackoverflow.com/questions/4502128/convert-google-analytics-cookies-to-local-session-storage/19207035#comment -44767913

Saya ingin tahu apa yang Anda semua pikirkan.

@caesarsol Saya pikir itu ide yang sangat buruk. Seperti yang saya jelaskan dalam komentar saya , cookie dan penyimpanan lokal tidak memiliki batasan yang sama, jadi menukarnya untuk setiap skrip yang berjalan pada halaman sangat berisiko.

halo @philipwalton , terima kasih atas tanggapannya, tetapi mungkin saya menjelaskan dengan buruk, saya merujuk pada komentar ini oleh SO pengguna _smhmic_:

Ini mungkin melanggar GA TOS! Berikut adalah kutipan bekas dari anggota Tim GA, diambil dari artikel ini: "Menggunakan mekanisme Pengelolaan Status HTTP" (baca: localStorage) "untuk menyebarkan status cookie adalah pengelakan perlindungan privasi kami. Melakukannya melanggar Persyaratan Layanan Google Analytics ". Interpretasi saya tentang ini adalah bahwa GA menggunakan cookie dan bukan Penyimpanan lokal karena lebih banyak pengguna yang akrab dengan konsep cookie dan cara menghapusnya; dengan demikian, penggunaan cookie oleh GA adalah fitur privasi. – smhmic

Menggunakan mekanisme Pengelolaan Status HTTP" (baca: localStorage) untuk menyebarkan status cookie adalah pengelakan perlindungan privasi kami. Melakukannya melanggar Persyaratan Layanan Google Analytics

Hmm, menurut saya ini tidak benar. Ada fitur penyisihan yang disediakan GA (mis. ekstensi Chrome) yang tidak bergantung pada pelaksana yang menggunakan cookie. Saya pikir inti dari bagian TOS ini adalah Anda tidak dapat membuat mekanisme di mana seseorang yang menggunakan ekstensi resmi "jangan lacak" akan _masih_ dilacak.

Saya dapat memeriksanya lebih jauh dan saya akan memperbarui utas ini jika asumsi saya ternyata salah.

Memperbarui:

Penggunaan localStorage untuk menyimpan ClientID tidak bertentangan dengan TOS; sekarang secara resmi didukung oleh Google: https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#using_localstorage_to_store_the_client_id

Catatan: jika Anda harus mendukung (sangat) browser lama (seperti iOS5 dan FF4), cuplikan contoh mereka mungkin gagal (lihat: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/storage/localstorage. js).