فرادرساستفاده از Gtag در انگولار – راهنمای کاربردی
در این مقاله می‌خواهیم با روش استفاده از قابلیت‌های تگ گذاری سایت گوگل در یک اپلیکیشن ساده تک‌صفحه‌ای انگولار آشنا شویم. با ما همراه باشید تا روش استفاده از Gtag در انگولار را بیاموزید. در کد نمونه زیر می‌بینیم که از GtagDirective به این منظور استفاده شده است:
گزاره "gtag="home در فایل html یک رویداد page-view به حساب شما در پلتفرم‌های گوگل آنالیتیکس، گوگل ادز یا گوگل مارکتینگ که در طی مقداردهی اولیه اپلیکیشن تنظیم کرده‌اید، ارسال می‌کند.
متن home در گزارش به صورت عنوان صفحه ظاهر می‌شود، در حالی که مکان صفحه به صورت خودکار توسط دایرکتیو ارائه شده از سوی اپلیکیشن که از router بهره می‌گیرد، تشخیص داده خواهد شد.
با افزودن این دایرکتیو به همه صفحه‌های اپلیکیشن، می‌توانیم اقدام به ردگیری نمایش صفحه‌ها بکنیم.
همین کار را می‌توان در مورد بخشی از نمایش‌ها در زمانی که به صورت شرطی نمایش می‌یابند نیز اعمال کرد:
هر زمان که بخشی از شرایط تطبیق یابد، ngSwitch نمایش می‌یابد و رویداد page-view مربوطه اجرا می‌شود.
دایرکتیو Gtag
پیاده‌سازی این قابلیت کاملاً ساده به نظر می‌رسد:
این پیاده‌سازی بر GtagService تکیه دارد که در ادامه معرفی خواهیم کرد و عنوان، مسیر و اطلاعات موقعیت را برای ارسال رویداد از طریق سرویس گردآوری می‌کند. همچنین از Router در موارد امکان برای تشخیص خودکار موقعیت صفحه استفاده می‌کند، مگر این که قبلاً بر اساس ورودی‌اش ارائه شده باشد.
سرویس Gtag
GtagService همه کارکردهای عمده gtag.js را با چند متد که رویدادهای پیش‌فرض گوگل را پیاده‌سازی می‌کنند بسته‌بندی می‌کند و استفاده از آن کاملاً آسان است:
در مثال فوق یک رویداد login، یک رویداد search و یک رویداد تجاری add_to_cart کامل را ارسال می‌کنیم. چنان که در فراخوانی ()search مشخص است، حتماً متوجه شده‌اید که این متدها یک Promise بازگشت می‌دهند، از این رو می‌توانید کارهای ناهمگام را درست پس از کامل شدن تگ گذاری انجام دهید.
پشت صحنه
در پشت صحنه GtagService اغلب کارها را انجام می‌دهد. شیء قابل فراخوانی gtag.js در سازنده‌اش تزریق می‌شود و برای اجرای دو فراخوانی set و event مورد استفاده قرار می‌گیرد:
برای کسب اطلاعات بیشتر می‌توانید به صفحه مستندات رسمی gtag.js (+) مراجعه کنید. اما اساساً دستور set برای تعیین مقادیر دائمی استفاده می‌شود که در همه رویدادهای بعدی ارسال خواهد شد و دستور event نیز در عمل برای ارسال رویداد گوگل آنالیتیکس استفاده می‌شود.
با این حال پیاده‌سازی متد ()event از مزیت مکانیسم event_callback در gtag.js برای بازگشت یک Promise بهره‌مند می‌شود. برای این که از resolve نشدن دائمی Promise جلوگیری کنیم تا از مطمئن شویم که کتابخانه gtag.js در نهایت مشکل عدم بارگذاری نمی‌یابد، از یک تابع timeout بر اساس پیشنهادهای گوگل (+) استفاده کرده‌ایم.
ماژول Gtag
مقداردهی این کتابخانه در پشت صحنه نیز انجام می‌یابد.
GtagModule یک تابع مقداردهی استاتیک عرضه کرده است که بر اساس بهترین رویه‌های انگولار ID گوگل آنالیتیکس هدف تعیین می‌شود:
به طور معمول تابع ()init یک InjectionToken به همراه شیء پیکربندی عرضه می‌کند که از سوی سرویس نهایی دیگر مصرف می‌شود:
به علاوه کد مقداردهی ما توکن GTAG را که قبلاً دیدیم از طریق یک تابع استاتیک ()gtagFactory در GtagService تزریق می‌کند:
کد فوق قطعه کدی دقیقاً مشابه را بازتولید می‌کند که بر اساس دستورالعمل‌های نصب gtag.js (+) می‌توانیم در فایل index.html خود با کمترین تغییرات کپی کنیم.
ابتدا factory بررسی می‌کند آیا شیء gtag موجود است یا نه و اگر چنین باشد آن را بازگشت می‌دهد. اگر چنین نباشد، یک عنصر اسکریپت ایجاد می‌شود و به هد سند الحاق می‌شود تا بارگذاری کتابخانه را تحریک کند. در اینجا شیء پیکربندی برای پیکربندی کتابخانه پیش از بازگشت وهله‌ای سراسری از gtag مورد استفاده قرار می‌گیرد.
به صورت پیش‌فرض پیاده‌سازی رویداد خودکار page-view را با تنظیم مشخصه send_page_view روی مقدار false غیرفعال می‌کند، بنابراین دایرکتیو ما تحت کنترل کامل است. به این ترتیب به پایان این راهنما می‌رسیم.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی سایت
- مجموعه آموزش‌های برنامهنویسی
- آموزش گوگل آنالیتیکس (Google Analytics) برای تحلیل آمار وب سایت
- آموزش انگولار (Angular): ساخت یک اپلیکیشن در ۲۰ دقیقه – به زبان ساده
- استفاده از وب کامپوننت در انگولار — به زبان ساده
==
