خوب بدون مقدمه و حاشیه بریم سر اصل مطلب !
اکثر جاها برای اینکه گوگل آنالیتیکس نصب و راه اندازی کنی برای سایتت فقط کافیه دو تا اسکریپت که گوگل آنالیتیکس بهت میده داخل تگ head قرار بدید و کار تموم می شه
ولی خوب Next داستان خودشو داره برای این کار باید اول به روت Pages ی فایل documents.jsx_ یا اگه پروژه تون typescript template هستش documents.tsx_ اضافه کنید
این فایل کارش اینه که از تکرار تگ های HTML شامل meta , link , script که بین Rout هاتون مشترک هست جلوگیری کنه. دو تا عکس پایینی هم نمونه typescript و هم javascript که محل قرارگیری اسکریپت های گوگل آنالیتیکس داخل کدها مشخصه
خوب تا اینجا کار تو document خود Next هست ... و verify میشه ولی ی اتفاق بدی که میوفته تو گوگل آنالیتیکس نمیتونی real time چک کنی فقط میگه کاربر از چه لینکی اومده ، الان کجاست ؟ خدا میدونه :)
برای اینکه به گوگل بفهمونی کاربر تو چه صفحه ای الان هست باید دست به دامان next/router بشی داخل فایل app.js_ و دو تا function گوگلی ادد کنی تو پروژه ات (هر فایلی که خودت فکر میکنی جاش مهم نیست ولی باید import شه تو فایل app.js_) من برای جدا بودن تو روت پروژه ی پوشه lib ساختم و داخل پوشه lib یه پوشه ga و داخلش ی فایلindex.tsx ساختم و کدمو ریختم داخلش :)
خوب دو تا عکس زیری هم مدل typescript و javascript ش
حالا موقعشه بریم سر وقت app و دست به دامان router شدن
برای اینکار باید داخل فانکشن app از هوک useRouter بعلاوه هوک useEffect استفاده کنیم به شکل زیر و اون فانکشن های گوگل ایمپورت کنی داخل app
حالا یعد از deploy سایت می تونید داخل گوگل آنالیتیکس login کنید و لذتشو ببرید :)