سردرگمی‌های کار کردن با گوگل-آنالاتیکز جدید (Google Analytics)

احتمالا با این موضوع برخورد کردید که وقتی توی پلنینگ تسکی در مورد یک قابلیت جدید اپلیکیشن مطرح می‌شه خیلی‌ها اشتیاق و علاقه نشون می‌دن ولی وقتی راجع به اندازه‌گیری میزان استفاده از همون قابلیت صحبت می‌شه معمولا دولوپرها از برقرار کردن ارتباط چشمی با شما خودداری می‌کنن و ساکت می‌شن و کسی دوست نداره که روی این موضوع کار کنه. توی این چند سالی که کار کردم کمتر برنامه‌نویسی رو دیدم که به این مبحث علاقه‌ای داشته باشه ولی واقعیت اینه که اگر بخواید ویژگی جدیدی ارائه کنید که از عملکردش مطمئن باشید، باید بحث آمار‌گیری رو هم در نظر بگیرید. از نظر من علت این که خیلی از برنامه‌نویس‌ها به این مبحث علاقه‌ای ندارن، سردرگمی‌هاییه که همراه با این پیاده‌سازی‌ها وجود داره. هدف من از این مقاله درمیون گذاشتن چالش‌هاییه که خودم بهشون بر خوردم تا شاید این سردرگمی ها رو برای شما شما کمتر کنم.

البته این رو هم بگم، اشتباه نکنید! من مخالف استفاده از ابزار های آنالاتیکزی مثل گوگل آنالیتیکز نیستم. بر‌عکس، خیلی روی این ابزار تاکید دارم و موارد زیادی بوده که تونستم با استفاده از همین ابزار مشکلات پیاده‌سازی خودم رو پیدا کنم. مثلا توی اسنپ هر باری که اپلیکیشن مسافر (Passenger PWA) رو رلیز می‌کنیم، علاوه بر همه تست‌هایی که داریم، من با استفاده از گزارش‌های ریل‌تایم گوگل‌-آنالاتیکز مطمئن می‌شم که مشکلی وجود نداره و مسافر‌ها بدون مشکل به سفرشون ادامه می‌دن. فکر کنم به اندازه کافی تاکید کرده باشم که چقدر این ابزار می‌تونه به شما کمک کنه و بهتر باشه بریم سراغ سردرگمی‌هایی که صحبتش رو کرده بودم.

توجه: خوندن این مقاله رو به کسایی پیشنهاد می‌کنم که تجربه پیاده سازی گوگل-آنالاتیکز رو داشته باشن یا در حال انجام این پیاده سازی باشن.

سردرگمی شماره یک: تحریم‌ها

متأسفانه این مورد بیشتر اعصاب‌خوردیه تا سردرگمی و فقط محدود به گوگل-آنالاتیکز نیست. بیشتر کاربرهای ایرانی تو زندگی روزمره‌شون با این مورد برخورد دارن. چیزی که اینجا اعصاب‌خوردی رو بیشتر می‌کنه اینه که از قدم اول شروع کارتون با این مشکل مواجه می‌شید.

یکی از دردسر‌های رایج، تداخل وی‌پی‌ان شخصی با وی‌پی‌ان شرکته. ممکنه شما نتونید این دو تا رو هم زمان کانکنت کنید. برای حل این مشکل بهترین راه حل استفاده از یک وی‌پی‌ان بروزر بیس هست. این وی‌پی‌ان‌ها فقط روی همون برزوری که دارید ازش استفاده می‌کنید، تاثیر می‌گذارن و تداخلی با وی‌پی‌ان شرکت شما ندارن.

از اون بدتر شرایطیه که محصولتون موقعی که وی‌پی‌ان خارجی وصل باشه بالا نیاد و می‌تونید تصور کنید که توی چه لوپی گیر می‌کنید. بهترین راه‌حل برای این مشکل، استفاده از یک وی‌پی‌ان ساکسه که به ابزاری مثل Charles یا FoxyProxy وصل می‌شه. هر دو ابزار به شما این امکان رو می‌دن که یه بخش مشخصی از نتورکتون رو از داخل پروکسی عبور بدید. پس مراقب این موضوع هم باشید چون انجام همه این کارها می‌تونه خیلی زمان‌بر باشه.

سردرگمی شماره دو: داکیومنتیشن پیچیده

اگه کلمه «Google Analytics Documents» رو توی گوگل سرچ کنید با این صحنه رو‌به‌رو می‌شید:

معمولا کسایی که تسک رو برای شما تعریف می‌کنن مشخص نمی‌کنن که شما باید از کدوم داکیومنت استفاده کنید. و طبیعیه کسی که این عکس رو ببینه اول باید تحقیق کنه که فرق این روش‌ها با هم چیه و به نظرم اینم از اون کار‌هاییه که کمتر کسی بهش علاقه داره. گوگل چهار لینک روی این بخش از داکیومنتیشنش گذاشته که کلمه Web و gtag.js دقیقا یک لینک دارن. واقعا هدفشون رو از این کار نمی‌دونم. شاید می‌خواستن که بیشتر از gtag استفاده بشه ولی با این کار فقط من رو گیج‌تر از قبل کردن. دو لینک دیگه هم دست کمی از قبلی‌ها نداره. analytics.js نسخه قدیمی‌تر گوگل-آنالاتیکز و Google Analytics 4 properties یه داکیومنت دیگه برای gtag هست که یکی از عجیب‌ترین چیز‌هاییه که توی داکیومنت‌ها بهش برخوردم. بعدا راجع این دو داکیومنت مشابه براتون بیشتر توضیح می‌دم. ای کاش گوگل یه همچین صفحه ای برای شروع داکیومنتش گذاشته بود!

به نظرم اگه اینطوری داکیومنت رو شروع می‌کردن، خیلی راحت‌تر می‌تونستم تصمیم بگیرم که از کدوم داکیومنت باید اطلاعاتی که می‌خوام رو پیدا کنم. بخش گوگل-تگ-منیجر (لینک سوم) رو به صورت فرضی اضافه کردم و هیچ ارتباطی با Google Analytics 4 properties نداره.

از این حرف‌ها بگذریم، خیلی خلاصه برای شما توضیح می‌دم که هر کدوم از این داکیومنت‌ها به چه درد می‌خوره.

۱. اگر از قبل، نسخه سه آنالاتیکز رو روی محصولتون نصب دارید و می‌خواید پیاده‌سازیتون رو کامل‌تر کنید یا این که اگر می‌خواید از قابلیت هایی از آنالاتیکز استفاده کنید که هنوز توی نسخه ۴ پیاده سازی نشدن (پیشنهاد می‌کنم حتما اول راجع به این موضوع تحقیق کنید) از داکیومنت Analytics.js استفاده کنید. این کتابخونه کارش برقراری ارتباط بین محصول شما با یک پراپرتی نسخه ۳ گوگل آنالاتیکزه.

۲. اگر گوگل-تگ-منیجر ندارید و می‌خواید آنالاتیکز نسخه ۴ رو پیاده‌سازی کنید، از داکیومنت gtag استفاده کنید. این ابزار جدید گوگل برای لود کردن گوگل-آنالاتیکز نسخه ۴ به بعده. البته gtag چیز‌های دیگه‌ای رو هم می‌تونه به محصول شما وصل کنه و صرفاً برای آنالاتیکز ساخته نشده.

۳. اگر تگ منیجر دارید و می‌خواید از نسخه سه یا چهار آنالاتیکز استفاده کنید بهتره که اول داکیومنت جی‌تگ(نسخه چهار)‌ یا analytics.js (نسخه سه) رو مطالعه کنید و بعد هم داکیومنت خود تگ منیجر رو بخونید(البته بعید می‌دونم از داکیومنت تگ منیجر خیلی چیزی یاد بگیرید. به نظرم توی یوتوب آموزش های گوگل-تگ-منیجر رو ببینید، خیبی بهتره) و تا جایی که امکان داره از زدن custom HTML script مخصوصا برای نسخه چهار خودداری کنید و از امکانات خود گوگل-تگ-منیجر برای این کار استفاده کنید.

نمی‌دونم چرا گوگل، سکشن google analytics 4 properties رو اضافه کرده و توضیحات تقریبا یکسانی رو توی دو داکیومنت گذاشته. مثلا برای فرستادن page view این دو داکیومنت موجوده:

و همون توضیح با یکم اختلاف در فیلد‌ها، در داکیومنت Google Analytics v4 Properties:

وجود این اختلاف‌ها منو خیلی به شک انداخت. فکر می‌کردم شاید دارم اشتباه می‌کنم و گاهی چون با سرچ به این داکیومنت‌ها می‌رسیدم، فکر می‌کردم که داکیومنت قبلی رو با دقت نخوندم و یا فراموش کردم در حالی که هر دو این داکیومنت‌ها یک کار رو توضیح می‌دن.

یک مورد دیگه از این اختلاف ها، وجود تفاوت های جزئی در اسکریپت نصب گوگل آنالاتیکز در دو داکیومنته:

حتی اسنیپت‌های ارائه شده برای نصب هم دقیقا توی داکیومنت ها یکی نیست و گاهی از کلماتی مثل Measurement ID به جای GA Measurement ID استفاده شده که شاید برای کسی که تازه وارد این موضوع شده باشه، این سو تفاهم رو پیش بیاره که gtag یک آی‌دی متفاوت از آنالاتیکز داره.

پیشنهاد من اینه که فقط یکی از دو داکیومنت gtag یا Google analytics 4 properties رو مطالعه کنید و جاهایی که به پاسخ سوالتون نرسیدید، اولین کاری که می‌کنید این باشه که همون بخش رو در صورت وجود توی داکیومنت دیگه پیدا کنید و مطالعه کنید. چون در حال حاضر این اختلاف‌ها وجود داره.

سردرگمی شماره سه: Gtag در مقابل گوگل-تگ-منیجر

این یکی از اولین اشتباه‌های من موقع پیاده سازی ابتداییم بود. من دقیقا نمی‌دونستم که هدف استفاده از gtag چیه و فکر می‌کردم مشابه analytics.js باشه و به صورت مسخره ای با استفاد از گوگل-تگ-منیجر اسکریپت gtag رو به صفحه اضافه کردم و بعد سعی کردم که آنالاتیکز رو با gtag لود کنم. این کار عملیه ولی بعد از مدتی دست و پا زدن این داکیومنت رو خوندم:

با این که بخش زرد رنگ پایین داکیونت توضیح داده که نباید با استفاده از custom HTML tag، اسکریپت gtag رو به سایتتون اضافه کنید. من این کار رو قبل از خوندن این داکیومنت انجام دادم و تونستم کارمو راه بندازم. مشکل اینجاست که گوگل این روش رو به طور رسمی پشتیبانی نمی‌کنه و این مدل پیاده‌سازی ممکنه در آینده کار نکنه و شما مجبور بشید همه چیز رو تغییر بدید. توی داکیومنت نوشته که اگر می‌خواید از تگ منیجر برای لود کردن مثلا آنالاتیکز نسخه ۴ استفاده کنید، باید به جای custom HTML tag از قابلیت های پیش ساخته خود GTM استفاده کنید. گیج‌کننده ترین بخش این ماجرا اینه که بعد از استفاده از تگ های پیش‌ساخته گوگل-تگ-منیجر، می‌بینید که اسکریپت gtag به صفحتون اضافه می‌شه و اگه داکیومنت رو دقیق‌تر بخونیم توی یک بخش خیلی زیر پوستی به این موضوع اشاره می‌کنه:

اضافه شدن gtag توسط گوگل-تگ-منیجر، باعث شد که من این برداشت اشتباه رو بکنم که خودم اجازه دارم با کاستوم اسکریپت هرطوری که دوست دارم از داخل گوگل-تگ-منیجر، gtag رو کنترل کنم (که به نظرم باید همین طور می‌بود) ولی ظاهرا فعلا گوگل خیلی تمایلی نداره که شما این کار رو انجام بدید و ممکنه که بخوان در آینده این پیاده سازی‌های داخلی خودشون رو تغییر بدن.

لزومی نداره که بین گوگل-تگ-منیجر و gtag حتما یکی رو انتخاب کنید. ولی دقت کنید که هیچ وقت gtag رو با استفاده از custom HTML script های گوگل-تگ-منیجر به محصولتون اضافه نکنید و اگر می‌خواید gtag رو با استفاده از گوگل-تگ-منیجر داشته باشید حتما از امکانات پیش ساخته گوگل-تگ-منیجر استفده کنید تا دردسر کمتری داشته باشید.

سردرگمی شماره چهار: Debugging

اگر قبلا با آنالاتیکز کار کرده باشید، به احتمال خیلی زیاد از اکستنشن دیباگ گوگل آنالاتیکز هم استفاده کردید. البته شما لزوماً نباید این اکستنشن رو نصب کنید ولی پیشنهادم اینه که این کار رو بکنید چون روش های دیگه‌ی انجام این کار خیلی زمان‌برن و آورده خاصی ندارن. اسم این اکستنشن معروف که خیلی به دیباگ شما کمک می‌کنه Google Analytics Debugger و خیلی وقته که توسط تیم گوگل دولوپ شده. کاری که این اکستنشن انجام می‌ده اینه که به گوگل آنالاتیکز یا gtag می‌گه که لطفا هر اتفاقی می‌افته رو برای کاربر من لاگ کن.

همون طور که احتمالا قبلا هم دیدید، لاگ‌های خیلی مفیدی از این دیباگر توی کنسول شما ایجاد می‌شه. برای مثال این لاگ آنالاتیکز نسخه ۳ هست که روی اپلیکیشن مسافر اسنپ نصب می‌شه:

همه چیز خیلی تمیز و خواناست و من واقعا از لاگی که تولید می‌کنه، راضی‌ام. ظاهرا گوگل، سورس کد همین دیباگر رو توی نسخه ۴ آنالاتیکز هم استفاده کرده. منتها به نظر میاد این کار خیلی به درستی انجام نشده و نسخه ۴ آنالاتیکز در حالی رلیز شده که هنوز ارتباطش با لاگر دیباگ مود درست پیاده‌سازی نشده. علتش رو نمی‌دونم ولی شاید به خاطر ددلاین رلیز آنالاتیکز ۴ این کار رو کرده باشن. در هر صورت نتایجی که این کار به بار آورده برای برنامه نویس‌ها جالب نیست. برای مثال خیلی از فیلد‌های داخل لاگ درست پر نمی‌شن.

دیدن فیلد‌های undefined توی لاگ های نسخه ۴ آنالاتیکز چیز عجیبی نیست. من اول فکر می‌کردم که موقع پیاده‌سازی اشتباهی انجام دادم و این باعث شده که gtag نتونه تشخیص بده باید اطلاعات جمع‌آوری شده رو به کجا بفرسته ولی بعد متوجه شدم این مشکل از سمت خود گوگل هست چون من ایونت‌هایی که ارسال می‌شد رو توی پنل آنالاتیکز دریافت می‌کردم.

سه تغییر بزرگ و مثبت نسخه جدید آنالاتیکز

درسته که نسخه جدید گوگل آنالاتیکز (به نظر من)‌ هنوز خیلی آماده و تکمیل نیست ولی همین نسخه اولیه هم یه مزایایی داره که گفتنش خالی از لطف نیست. می‌خوام سه موردی که برای من به عنوان یک برنامه نویس جذاب بود رو براتون تشریح کنم.

نکته اول اینه که توی این نسخه سعی شده فاصله بین موبایل-اپ و وب به حداقل برسه. قبلا کاستوم ایونت‌های آنالاتیکز چند فیلد محدود داشتن:‌ category, action, label and value. توی نسخه جدید این فیلد ها رو به انتخاب خودتون می‌سازید. این ویژگی خیلی دست منو توی انتخاب نوع ایونت‌هام و ساختن کدی که قابل درک‌تر باشه، کمک کرد و همینطور داکیومنت‌های بین اپلیکیشن نیتیو و تحت وب می‌تونه مشترک باشه.

نکته دوم دیتا‌هاییه که خود آنالاتیکز به صورت خودکار از سایت شما جمع‌آوری می‌کنه:‌

این قابلیت می‌تونه به خیلی از اپلیکیشن‌هایی که پیاده سازی ساده‌ای دارن این کمک رو بکنه که هر چیز جزئی‌ای رو داخل کد پیاده‌سازی نکنن.

نکته سوم که به نظرم مهم‌ترین و کاربردی‌ترین بخش گوگل آنالاتیکز جدید برای برنامه‌نویس‌هاست، دیباگر ریل تایمه. یکی از بزرگترین دردسر‌های کار کردن با گوگل آنالاتیکز اینه که ممکنه تا ۲۴ ساعت طول بکشه تا دیتای شما پردازش بشه. این یعنی هر بار یک تغییر توی پیاده‌سازی‌تون می‌دید ممکنه تا ۲۴ ساعت نتونید از نتایج تغییراتتون اطمینان داشته باشید. با قابلیت دیباگ آنالاتیکز جدید شما می‌تونید تا حد خوبی به صورت زنده ببینید که قراره چه چیز هایی توی دیتابیس آنالاتیکز شما ذخیره بشه.

به نظرم این یکی از بهترین ویژگی‌های گوگل آنلاتیکز چهاره و کار دولوپر رو خیلی راحت‌تر می‌کنه.

امیدوارم تونسته باشم با اشاره به این موضوع‌ها حداقل یک سرنخ از مشکلاتی که ممکنه باهاش رو‌به‌رو بشید، بهتون داده باشم. اگه بخوام مهم ترین چیز، که موقع کار کردن با گوگل آنالاتیکز یاد گرفتم رو بهتون بگم اینه که: صبور باشید و بی‌خیال نشید، این سردرگمی‌ها برای همه کسایی که با این ابزار کار می‌کنن یه روزی پیش اومده.