Html5-boilerplate: استخدم localStorage لتتبع Google Analytics عند توفرها

على الرغم من أنني لست متأكدًا مما إذا كنا نريد قفل Modernizr على أنها تبعية.

ربما سيكون من الأفضل إضافته إلى المستندات فقط؟

أيضا ، pingmathiasbynens.

شكرا لتحسين القص ، ديفيد. بصفتك alrra ، أعتقد أننا جيدون في إضافته إلى المستندات.

الفضل لا يخصني. هذا ما لفت انتباهيelmerbulthuis. على الرغم من أنني لا أعتبر هذا تحسينًا لـ _snippet_ بحد ذاته ، إلا أنه يمثل تحسينًا للويب ككل :-p.

أتساءل كم عدد البايتات التي يمكن حفظها ، على الصعيد العالمي ، إذا اعتمد الجميع الحل localStorage .

من الواضح أنني معجب كبير بهذا الحل. المشكلة الوحيدة في تضمينها افتراضيًا في النموذج المعياري هي المشكلة التي ذكرها davidmurdoch : نحتاج إلى اختبار الميزة مقابل localStorage أولاً. يمكن القيام بذلك عن طريق استخدام Modernizr أو عن طريق إضافة جزء صغير من التعليمات البرمجية المستقلة ولكن في كلتا الحالتين ، سيؤدي ذلك إلى زيادة حجم الصفحة قليلاً. ثم مرة أخرى ، سيوفر العديد من البايتات على المدى الطويل ، حيث لن يتم إرسال ملفات تعريف الارتباط في رؤوس الطلبات لأي موارد على المجال المتأثر.

شيء من هذا القبيل:

(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')}());

(يستخدم اختبار الميزة localStorage المأخوذ من http://mathiasbynens.be/notes/localstorage-pattern.)

يبدو أنه يعمل بشكل جيد بعد بعض الاختبارات السريعة. سأقوم بإنشاء علاقات عامة بعد اختبار هذا على نطاق أوسع. (نرحب بالمساعدة ، بالطبع!)

لمعلوماتك: هذا لديه القدرة على حفظ حوالي 33 بايت خام (الرؤوس / ملفات تعريف الارتباط غير مضغوطة) لكل رحلة ذهابًا وإيابًا لكل طلب إلى المجالات المتأثرة.

إن حل اكتشاف الميزة المضمنة الحالي mathiasbynens أكبر بـ 130 بايت مضغوط ∗ (من الواضح أن هذا سيكون مختلفًا لكل صفحة فريدة ، لكنه يعطينا فكرة تقريبية). لذا ، ربما يجب أن نرى ما إذا كان بإمكاننا ممارسة الرياضة أكثر قليلاً.

أود شخصياً أن أرى اختلاف gzipped إلى 65 بايت وسأعطيها بنفسي قريبًا. :-)

_ ∗ باستخدام هذا المخفض: http://www.vervestudios.co/projects/compression-tests/snippet-deflator_

318 جيجا بايت بايت (نسختنا الحالية هي 248 جيجا بايت بايت):

(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')}())

لم يتم اختبار هذا جيدًا ، لذلك ما زلت بحاجة إلى القيام بذلك. لكنها البداية.

ولسوء الحظ ، ربما تم اختراق اختبار localStorage في بعض المتصفحات في مكان ما ، لأنني تخلصت من مكالمات setItem و getItem واستخدمت بعض "حيل" الجولف الأخرى.

هذا كل ما لدي الآن. :-)

لقد خطر لي أننا كنا نضغط على المقتطف نفسه ، وهو أمر لا طائل من ورائه. تعتمد نتائج Gzip على باقي المستند (أي مصدر HTML إذا كان مضمّنًا في مستند ، أو باقي ملف JavaScript إذا كان جزءًا من مستند). ربما لا تكون المقارنة بين الأحجام المضغوطة بتنسيق gz للمقطع فقط هي أفضل طريقة لقياس ذلك؟

مقتطفك يبدو لطيفًا. من الجيد إعادة استخدام الطابع الزمني ga.l بدلاً من إنشاء طابع جديد!

ولسوء الحظ ، من المحتمل أن يكون اختبار localStorage مخترقًا في بعض المستعرضات في مكان ما ، حيث أنني تخلصت من مكالمات setItem و getItem واستخدمت بعض "حيل" الجولف الأخرى.

إذا كان الأمر كذلك ، فسيكون IMHO بمثابة صفقة.

يمكننا استبدال document.getElementsByTagName('script')[0] بـ document.scripts[0] عندما لا يعد دعم Firefox <9 مشكلة بعد الآن.

mathiasbynens GZIP إن استخدام المقتطف فقط سيقارب التوفير بالبايت الأدنى من الضغط. لذا فهي ليست نقطة خلافية بالكامل. في جميع الحالات تقريبًا ، ستزداد نسبة الضغط للمقتطف مع زيادة حجم الصفحة.

ما زلت بحاجة للاختبار! لقد أضفت مكالمات getItem و setItem مرة أخرى وتمكنت من خفضها إلى 309 بايت:

+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')}()

• أنا الآن أستخدم IIFE الذي يستخدم علامة + بدلاً من التفاف الأقواس.
• أنا أيضًا أستخدم localStorage.clientId بدلاً من localStorage.gaId لأن clientId يوفر بعض البايت.
• أدى استخدام this بدلاً من window توفير بايت واحد إضافي (بالإضافة إلى نقل المهمة GoogleAnalyticsObject ).
• يؤدي تغيير ga إلى ct (ct أكثر انتشارًا) إلى توفير بايت واحد آخر (ربما لا يستحق هذا الارتباك).
• التخلص من استدعاء الوظيفة وإعادة استخدام l localStorage عن طريق تعيينه إلى 0 عند النجاح يوفر مجموعة من البايتات.

مرة أخرى ، هذا يحتاج إلى المزيد من الاختبارات.

davidmurdoch هل من تحديثات على الاختبارات حتى الآن؟ هل يمكننا تدوين تدفق اختبار لهذا حتى يتمكن الآخرون من المساعدة في الاختبار؟

آسف لقد كنت MIA ، لقد وضعت في مشروع ذي أولوية عالية لمدة 6 أشهر ولم أتمكن من تخصيص الكثير من الوقت لأي شيء آخر.

الطريقة الأسهل (والأغبى) لاختبار ذلك هي استبدال رمز التحليلات الخاص بك بهذا الكود الجديد ومعرفة ما إذا كنت ستحصل على أي تقلبات غريبة في الأرقام وإصدارات المتصفحات. لقد فعلت هذا بنفسي ولم أر أي شيء يبرز. ومع ذلك ، ليس لدي العديد oldie الزوار على أي حال.

هناك طريقة أخرى تتمثل في تحميل نص التحليلات التجريبي هذا في إطار iframe تم إنشاؤه (حتى لا تتداخل مع مقتطف التحليلات الثابت) والاتصال بـ _trackPageview من هناك ، تحت حساب GA مختلف ، بالطبع. ثم تحتاج فقط إلى مقارنة البيانات بعد أسبوع أو نحو ذلك.

لا يمكنني أن أعدك بأنه يمكنني العمل على مقتطف سريع لاختبار ذلك في أي وقت قريب ؛ إذا أراد شخص آخر امتلاك هذه الأفكار أثناء عودتي للاختباء ، فيرجى المضي قدمًا. :-)

لقد بدأت للتو في اختبار http://drublic.github.io/css-modal/. لقد حصلت على 97 ألف مشاهدة للصفحة في الأشهر الماضية ، لكنني انتشرت بشكل كبير حول المتصفح.

الارقام:

1. كروم 44.01٪
2. فايرفوكس 34.38٪
3. إنترنت إكسبلورر 8.86٪
4. أوبرا 5.26٪
5. سفاري 4.01٪
6. متصفح أندرويد 2.22٪

لننتظر ونرى. حصلت على الإحصائيات "العادية" تعمل بالتوازي.

بصرف النظر عن ذلك ، أعتقد أن الكود يحتاج إلى مزيد من التحديثات لسهولة القراءة (80 حرفًا لكل سطر ومكان إدراج المعرف).

سأعود لهذا الاختبار في غضون أسبوع تقريبًا.

أنا في وقت مبكر بعض الشيء لكن النتائج التي توصلت إليها مستقرة جدًا في الوقت الحالي. لسوء الحظ ، أرى فرقًا كبيرًا في عدد الزوار لكلا الحسابين.

يُظهر التطبيق الافتراضي 2964 زيارة فريدة في الفترة من 13 إلى 17 مارس.
يعرض التخزين المحلي القائم على 756 زيارة فريدة لنفس الإطار الزمني.

قد يكون هناك ثلاثة أسباب محتملة:

• تطبيقي للقطع تالف
• تم حظر تحميل إطار iframe بواسطة المتصفحات
• تم كسر تكامل التخزين المحلي للقص

حاليًا لا أرى أي أخطاء في الكود الخاص بي هنا: http://drublic.github.io/css-modal/test-gau-localstorage.html (وهو إطار iframe الذي تم دمجه في الموقع).

كما أنني لم أجرب إطارات iframe التي تم حظرها بواسطة المتصفحات أو الصفحات. هل لدى أي شخص فكرة إذا كان هذا يمكن أن يحدث؟

وهو ما يقودني إلى الحل المتمثل في أن وحدة التخزين المحلية GUA التي تم قصها بها أخطاء. لم أنظر في ماهية المشاكل.
هل يمكننا تطوير متغير غير مصغر لإجراء مزيد من الاختبارات والتقليل بعد التمكن من حل عملي؟

سأختار أيضًا إزالة هذا من HTML5BP v5.0 وإصداره بـ 5.1 إذا وجدنا حلاً. ماذا تظنون يا جماعة؟

كما أنني سأختار إزالة هذا من HTML5BP v5.0 وإصداره بـ 5.1

drublic : +1: (تمت إضافة الإصدار إلى الإصدار 5.1.0 ).

إذا كانت الأرقام متوقفة عن هذا الحد ، فمن المحتمل أن يكون عليك تقديم معرف عميل افتراضي عند الاتصال بـ ga('create', w / storage:'none' .

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

مجرد مدونة حول هذه المشكلة على موقعي ، هنا: Google Async Analytics باستخدام LocalStorage وإعداد صفحة اختبار هنا: http://davidmurdoch.com/google-async-analytics-using-localstorage-test/.

يرجى القراءة والمشاركة والاختبار.

(ملاحظة: إذا وجدت أي أخطاء إملائية أو أخطاء في تلك الصفحات ، فأعلمني بذلك على twitterpxcoach .

مرحبًا ، آسف لقد تأخرت قليلاً في الحفلة. أنا أعمل في فريق Google Analytics ، وأردت التعليق وتقديم أفكاري حول هذه المشكلة.

بادئ ذي بدء ، لا أعتقد أنه من الجيد أن يوصي مشروع H5BP بمقتطف تتبع Google Analytics يختلف وظيفيًا عن المقتطف الموصى به رسميًا. من المحتمل أن يفترض الناس أنهم متماثلون ، وإذا لم يكونوا كذلك بالفعل ، فسوف يتسبب ذلك في حدوث ارتباك. إذا كانت وثائق Google Analytics تدعي أن GA يدعم بعض الميزات ولم يكن ذلك لأن شخصًا ما يستخدم مقتطفًا مختلفًا ، فمن المحتمل أن يؤدي ذلك إلى بعض المشكلات التي يصعب تصحيحها (خاصة إذا لم يوضح H5BP أن المقتطفات مختلفة).

إذا كان هناك شيء يمكن أن تقوم به GA بشكل أفضل ، فنحن نحب أن تتطور مع احتياجات المجتمع بدلاً من الابتعاد عنه. (راجع للشغل ، لا تتردد في ping أو cc me بشأن أي مشكلات متعلقة بـ Github من GA.)

على أي حال ، إليك المشكلة الرئيسية في localStorage ولماذا لا يقدمها GA كآلية تخزين افتراضية:

يتم تحديد نطاق localStorage إلى location.origin بينما يمكن تحديد نطاق ملفات تعريف الارتباط لنطاق المستوى الأعلى. يسمح تخزين ملفات تعريف الارتباط لـ analytics.js بالقيام بتتبع النطاق الفرعي خارج الصندوق ، وهذا لن يكون ممكنًا مع localStorage. بالإضافة إلى ذلك ، إذا كانت أجزاء من موقعك هي HTTP وأجزاء أخرى من HTTPS ، فسوف يفشل ذلك أيضًا (وفشل أعني أن التخزين غير مشترك ، لذلك ستفقد معرّف العميل وسيعامله GA كجلسة منفصلة ). في حين أنه من الصحيح أن هذه ليست مخاوف بالنسبة لمعظم مستخدمي GA ، ما زلت أعتقد أنه سيكون من السيئ تقديم هذا المقتطف المقترح كبديل للإسقاط بسبب فقدان الميزة الذي وصفته للتو.

ومع ذلك ، بناءً على هذه المشكلة ومشاركة مدونة davidmurdoch ، سنحاول إعطاء الأولوية لبناء آلية تخزين محلية مدعومة رسميًا. حاليًا ، لا تدعم المعلمة storage سوى الخيارات cookie و none ، لكننا نرغب في إضافة خيار localStorage ثالث ، لذلك المستخدمون الذين لا يفعلون ذلك بحاجة إلى نطاق فرعي أو إمكانية التتبع عبر المخططات. لا أعرف متى ستتم إضافة ذلك ، ولكن يمكنني تحديث هذه المشكلة عندما / إذا كان كذلك.

هل هذا يبدو معقولا للجميع؟

philipwalton شكرا على التعليق!

هل هذا يبدو معقولا للجميع؟

نسخة إلى : davidmurdochmathiasbynens

ومع ذلك ، بناءً على هذه المشكلة ومشاركة مدونة davidmurdoch ، سنحاول إعطاء الأولوية لبناء آلية تخزين محلية مدعومة رسميًا.

: +1:

يرجى تحديث المشكلة عندما يتم إضافة هذا. شكرا!

philipwalton : +1: خبر ممتاز! ومع ذلك ، لا تحتاج إلى _ المحاولة_ لإنشائه ، لقد فعلنا ذلك بالفعل! :-p (أنا طفل ، أنا طفل).

سأقوم بتحديث منشور مدونتي بهذه الأخبار ، وأنشئ GitHub repo باستخدام شفرة التتبع غير الرسمية localStorage ، مع التأكد من التأكيد على أوجه القصور فيه. شكرا!

: +1: ولكن يبدو أيضًا أن الويب في المستقبل يحتاج إلى نوع من topLevelStorage . سعيد أن الخيار سيكون متاحا. مع وضع ذلك في الاعتبار ، وعندما يدخل المقتطف ، ما هو التفضيل لـ h5bp؟

jonathantneal ، كان لدينا globalStorage في Firefox ، والذي قام بعمل مخطط متقاطع ومنافذ وتخزين المجال الفرعي. كان Firefox هو الوحيد الذي قام بتنفيذه ، ومنذ ذلك الحين تم اعتباره قديمًا. :-(

davidmurdoch شكرًا جزيلاً لك على فتح هذه القضية والبحث فيها ، ونحن نقدر ذلك بصدق!

philipwalton شكرًا مرة أخرى على الانضمام إلى المناقشة ، ومثل mathiasbynens قال ، يرجى إطلاعنا على آخر المستجدات!

وأنشئ GitHub repo باستخدام شفرة تتبع localStorage غير الرسمية ، مع التأكد من التأكيد على أوجه القصور فيه.

مستودع davidmurdoch هو https://github.com/davidmurdoch/ga-localstorage(على الرغم من أنه لم يتم تحديثه بعد).

لقد نشرت للتو البرنامج النصي "Google Analytics باستخدام localStorage" إلى npm: https://www.npmjs.org/package/ga-localstorage

تم أيضًا تحديث https://github.com/davidmurdoch/ga-localstorage repo بالرمز.

مرحبا ، هل قرأت هذا التعليق SO؟

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

سأكون فضوليًا لمعرفة ما هو رأيكم جميعًا.

caesarsol أعتقد أن هذه فكرة سيئة حقًا. كما أوضحت في تعليقي ، لا توجد نفس القيود في ملفات تعريف الارتباط والتخزين المحلي ، لذا فإن استبدالها بكل نص برمجي يتم تشغيله على الصفحة أمر محفوف بالمخاطر للغاية.

مرحبًا philipwalton ، شكرًا على الرد ولكن ربما أوضحت بشكل سيء ، كنت أشير إلى هذا التعليق من قبل SO user _smhmic_:

هذا قد ينتهك GA TOS! هذا اقتباس مُستعمل من أحد أعضاء فريق GA ، مأخوذ من هذه المقالة: "استخدام آليات إدارة حالة HTTP" (اقرأ: localStorage) "لنشر حالة ملف تعريف الارتباط هو تحايل على إجراءات حماية الخصوصية لدينا. يعد القيام بذلك انتهاكًا لبنود خدمة Google Analytics ". تفسيري لهذا هو أن GA تستخدم ملفات تعريف الارتباط وليس localStorage لأن المزيد من المستخدمين على دراية بمفهوم ملفات تعريف الارتباط وكيفية مسحها ؛ وبالتالي ، فإن استخدام GA لملفات تعريف الارتباط هو ميزة خصوصية. - سمكمي

يعد استخدام آليات إدارة حالة HTTP "(اقرأ: localStorage) لنشر حالة ملفات تعريف الارتباط بمثابة تحايل على إجراءات حماية الخصوصية لدينا. إن القيام بذلك ينتهك شروط خدمة Google Analytics

هممم ، لا أعتقد أن هذا صحيح. هناك ميزات إلغاء الاشتراك التي يوفرها GA (مثل امتدادات Chrome) التي لا تعتمد على المنفذ الذي يستخدم ملفات تعريف الارتباط. أعتقد أن الهدف من هذا القسم من شروط الخدمة هو أنه لا يمكنك إنشاء آلية يتم من خلالها تتبع الشخص الذي يستخدم امتداد "عدم التتبع" الرسمي.

يمكنني النظر في الأمر أكثر وسأحدّث هذا الموضوع إذا تبين أن افتراضاتي خاطئة.

تحديث:

استخدام localStorage لتخزين ClientID ليس مخالفًا لشروط الخدمة ؛ أصبح الآن مدعومًا رسميًا من Google: https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#using_localstorage_to_store_the_client_id

ملاحظة: إذا كان عليك دعم المتصفحات القديمة (للغاية) (مثل iOS5 و FF4) فقد يفشل مقتطفها النموذجي (انظر: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/storage/localstorage. شبيبة).