جاوااسکریپت - یکپارچهسازی Google Analytics 4 در React TS

بنابراین در حال حاضر میتوان بین Universal Analytics و Google Analytics 4 یکی را انتخاب کرد.

استدلالهای من درباره اینکه چرا باید از Google Analytics 4 استفاده کرد:

• تجزیه و تحلیل یونیورسال در اول ژوئیه ۲۰۲۳ بازنشسته خواهد شد، بنابراین وقتی یک تنظیمات جدید ایجاد میکنم فکر میکنم منطقی است که از ابتدا با گوگل آنالیتیکس ۴ پیش بروم.
• پکیج react-ga با GA-4 کار نمیکند و به نظر میرسد که کار نخواهد کرد. react-ga در حالت نگهداری غیرفعال است و بهروزرسانی نخواهد شد تا از GA-4 پشتیبانی کند مگر اینکه شخص دیگری یک PR ایجاد کند.
• اما ماژول کوتاه react-ga4 وجود دارد که با GA-4 کار میکند

پس من یک ویژگی در GA ایجاد کردم و این راهنما را دنبال کردم. من ماژول را نصب کردم و فقط در فایل اصلی index.tsx خود با ReactGA.initialize مقداردهی اولیه کردم. شناسه در یک فایل محیطی ذخیره نشده است چون به هر حال طبق این پاسخ عمومی است. یک تست روی localhost نشان میدهد که GA دادهها را دریافت میکند.

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

هر رویداد دیگری که مبتنی بر مورد استفاده باشد، باید خودمان آن را برنامهنویسی کنیم. این اساساً از Universal Analytics تغییر نکرده است.

پس سوال اول من این است: آیا اطلاعاتی که جمعآوری کردهام درست هستند؟ آیا آنها را به روش دیگری ترکیب میکنید؟ یا چیزی از قلم افتاده است؟

به طور کلی من تعجب میکنم استفاده از کتابخانه چه سودی دارد؟

--> به طور جایگزین، میتوانم برای یکپارچهسازی این کار را انجام دهم: افزودن تگ سایت جهانی مستقیماً به صفحات وب شما

رویکرد بهتر چیست؟

حالا بخش دوم، در اولین قطعه کد شما مقداردهی اولیه react-ga4 را در index.tsx من میبینید

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ReactGA from 'react-ga4';

ReactGA.initialize('G-XXXXXXXX');

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
); 

یک تست در لوکالهاست نشان میدهد که دادهها در داشبورد GA دریافت میشوند. عالی!

اما سپس مشکل خرابیهای Adblocker وجود دارد. معمولاً اگر کسی از adblocker استفاده کند، برنامه خراب میشود (adblocker نقاط پایانی درخواستهای تجزیه و تحلیل را مسدود میکند، بدون هیچگونه مدیریت خطا و غیره) و برای کاهش این مشکل ما بررسی میکنیم که آیا اسکریپت بارگیری نشده است و در نتیجه از این طریق تشخیص میدهیم که آیا کاربر از adblocker استفاده میکند که مانع بارگیری اسکریپت GA میشود. در کد نمونه من، من به سادگی آن را نادیده میگیرم و برنامه را بارگذاری میکنم... در سناریوهای دیگر، میتوان فرض کرد که شما میتوانید یک پنجره مودال فراخوانی کنید تا به آنها بگویید آن را غیرفعال کنند (البته، این با کد اضافی همراه خواهد بود). برگرفته از پاسخ spencer741

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ReactGA from 'react-ga4';

(async _ => {
  
    await ReactGA.initialize('G-XXXXXXXXX')
    .then(res => console.log("Analytics Success."))
    .catch(err => console.log("Analytics Failure."))
    .finally(() => {
      ReactDOM.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
        document.getElementById('root')
      );
    });
    })();

من میدانم که این در حال حاضر در تایپاسکریپت خطا ایجاد میکند:

Property 'then' does not exist on type 'void'.

Property 'catch' does not exist on type 'void'.

Property 'finally' does not exist on type 'void'.

'res' is declared but its value is never read.
Parameter 'res' implicitly has an 'any' type. 

'err' is declared but its value is never read.
Parameter 'err' implicitly has an 'any' type.

اما قبل از اینکه سعی کنم خطاها را برطرف کنم، میخواهم بدانم آیا آیا این یک راه حل قابل اجرا برای دور زدن خطاهای احتمالی با مسدودکننده تبلیغات است؟

پاسخ شماره ۱

از آنجایی که پاسخ دیگری وجود ندارد، سعی میکنم به بهترین توانم به سوالات پرسشکننده پاسخ دهم.

1. آیا اطلاعاتی که جمعآوری کردم درست است؟ بله و خیر. هرچند هر دو کتابخانه کاری که گفتهاند انجام میدهند را انجام میدهند، اما من عبارت «GA4 به اندازه کافی هوشمند است که تمام این تعاملها را به صورت خودکار اندازهگیری کند» را با کمی احتیاط میپذیرم، زیرا هر دو نیازمند مقداری پیکربندی برای ردیابی رویدادهای سفارشی یا چند trackingId هستند و باید تجزیه و تحلیل خود را دقیق تنظیم کنید. به مخزن react-ga4 و نمایش react-ga مراجعه کنید.

2. آیا آن را به روش دیگری ادغام میکنید؟ یا من چیزی را از دست دادهام؟ اگر منظور شما از «راه دیگری» چیزی جز مثالهای سوال بود، بله. همانطور که در کامنتها گفته شد، رویکرد بهتر این است که تمام منطق GA خود را بستهبندی کنید، یا با یک مؤلفه سطح بالاتر یا یک هوک سفارشی (نمونهها در زیر).

3. بهطور کلی من میخواهم بدانم استفاده از این کتابخانه چه فایدهای دارد؟ فکر میکنم بستگی به نیازهای پروژه شما دارد. اگر روی پروژهای موقت یا محصول حداقلی (MVP) کار میکنید که ممکن است یک سال دیگر در تولید نباشد، شاید بهتر باشد از react-ga استفاده کنید چون امتحان خودش را پس داده و در حال حاضر هفتهای ۶۰۰ هزار دانلود در NPM دارد. در غیر این صورت، بهروزرسانی کد شما به react-ga4 ممکن است به کاهش بدهیهای فنی در آینده کمک کند و از بهروزرسانیهای Google Analytics 4 بهرهمند شود.

4. رویکرد بهتر چیست؟ از پاسخهای GA4، در حال حاضر ۸ رویداد وجود دارد که میتوانید بیشتر سفارشی کنید. بیایید ببینیم چگونه میتوانیم یک هوک سفارشی با react-ga4 پیادهسازی کنیم:

ga4.ts

import ga4 from 'react-ga4'

const TRACKING_ID = 'G-XXXXXXXXX-X'
const isProduction = process.env.NODE_ENV === 'production'

export const init = () => ga4.initialize(TRACKING_ID, { 
  testMode: !isProduction 
})

export const sendEvent = (name: string) => ga4.event('screen_view', {
  app_name: "myApp",
  screen_name: name,
})

export const sendPageview = (path: string) => ga4.send({ 
  hitType: 'pageview', 
  page: path 
})

useAnalytics.ts

import React from 'react'
import { useLocation } from 'react-router-dom'

import * as analytics from './ga4'

export function useAnalytics() {
  const location = useLocation()

  React.useEffect(() => {
    analytics.init()
  }, [])

  React.useEffect(() => {
    const path = location.pathname + location.search
    analytics.sendPageview(path)
  }, [location])
}

export default useAnalytics

به طور جایگزین، اگر از react-router-dom استفاده نمیکنید، میتوانید مسیر را از شیء جهانی window بدست آورید، به این صورت:

analytics.sendPageview(window.location.pathname)

یا با Next.js:

const router = useRouter()
analytics.sendPageview(router.asPath)

استفاده

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Switch } from 'react-router-dom'

import { useAnalytics } from './useAnalytics'

function App() {
  useAnalytics() // add it here
  return <Switch>...</Switch>
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  node
)

۵. آیا این یک راهحل قابلقبول برای دور زدن خطاهای احتمالی با مسدودکننده تبلیغات است؟ یک آموزش در FreeCodeCamp.org وجود دارد که نشان میدهد چگونه میتوان از پروکسیها برای جلوگیری از مسدودکنندههای تبلیغات استفاده کرد. شما همچنین میتوانید از کتابخانههایی مانند FuckAdBlock، BlockAdBlock یا adblock-detect-react استفاده کنید تا بررسی کنید آیا مسدودکننده تبلیغ در صفحه فعال است و به صورت مشروط react-ga4 را مقداردهی اولیه کنید. به یاد داشته باشید: معمولاً جمعآوری دادههای آنالیتیکس ۲۴ تا ۴۸ ساعت طول میکشد. حسابهای جدید GA ممکن است چند روز طول بکشد تا شروع به ثبت دادهها کنند.

import React from 'react'
import { useDetectAdBlock } from 'adblock-detect-react'

const useAnalytics = () => {
  const adBlockDetected = useDetectAdBlock()

  React.useEffect(() => {
    if(!adBlockDetected) analytics.init()
  }, [])

  React.useEffect(() => {
    if (!adBlockDetected) { 
      analytics.sendPageview(window.location.pathname)
    }
  } [adBlockDetected, path])
}

امیدوارم مفید باشد! سلامت باشی.