یکی دیگه از تجربیات جدید دیگم می خوام به اشتراک بزارم که الکی خودم چند ساعت وقتم گرفت.
برای یک پروژه برای مدیریت بهتر مارکت و رفتار کاربر درخواست شد تا google tag manager راه اندازی کنیم.
برای این در نوشته ها خیلی ساده بود و باید هم این طور میبود اما به خاطر مشکلات فیلترینگ جدید گوگل دسترسی به پنل خود google tag manager یا همون به مخفف gtm مشکلات داشتم .
تنها راه اولیه این هست یک مرورگر بی استفاده داشته باشید که کش اطلاعات روش براتون بی اهمیت باشه.
هر اطلاعاتی که روی اون مرورگر دارید حذف کنید و دستی cookie حذف کنید هر اطلاعتی که روش هست
بعد از حذف اطلاعات به یک VPN که بر بستر کریو کار می کنه متصل بشید .
بعد توسط همون مرورگر که اطلاعات حذف کردید متصل بشید و این هم توجه کنید location دسترسیش برای اون مرورگر مسدود کنید تا بدون گرفتن اررور 403 به پنل tagmanager متصل بشید.
تا اینجا تونستیم به پنل وصل بشیم پنل توسط مسئول مربوطه باید تنظیم بشه و راه اندازی بشه در مرحله بعدی شما باید کاری که انجام بدید اتصال به google tag manager تنظیمات بر روی پروژه Reactjs انجام بدید
برای این مورد به راحتی میتونید از پکیج زیر استفاده کنید.
من این پکیج استفاده کردم و خیلی راحت و ساده و این اتصال با استفاده از کد زیر برای شما انجام میده.
const tagManagerArgs = { gtmId: 'GTM-000000' } TagManager.initialize(tagManagerArgs)
این کد بایستی در index.js قرار بدید در پروژه reactjs
در صورتی که دارید از nextjs استفاده می کنید می توانید این فایل در
_app.js
قرار بدید.
البته توضیحاتش بیشتر روی خود پروژه می توانید داشته باشید .
بعد از راه اندازی این قسمت و تنظیمات google analytiic روی پروژه یک سری اطلاعاتی کلی در اختیار شما قرار میده .
اما برای ارسال اطلاعات custom شده توسط خود شما می توانید از کد زیر استفاده کنید
const tagManagerArgs = { dataLayer: { event: 'pageview', userId: '002', userProject: 'project', page: 'home', }, }; TagManager.dataLayer(tagManagerArgs); console.log(tagManagerArgs);
توجه کنید استفاده از event ها شمارو می کنه که تا در mode preview بتونید اطلاعات ببینید و دیباگ خوبی انجام بدید.
در مرحله اخر مشکلی برای من پیش اومد
در مرحله اتصال پنل قسمت preview در tagmanager در صورتی که به مشکل بر خوردید بررسی کنید بر روی مرورگر بایستی Cookie 3d party فعال شده باشد.
امیدوارم مفید بوده باشه.
