گوگل تگ منیجر (Google Tag Manager) و GTAG.JS روش هایی هستند که به ما کمک می کنند تا بتوانیم تگ های خود را روی محصولات گوگل همچون Google Ads و Google Analytics پیاده سازی کنیم.
گوگل تگ منیجر و gtag.js با اینکه خروجی یکسانی را برای ما خواهند داشت، ولی:
چنانچه کدهای gtag.js را به سایت اضافه کنید، اطلاعاتی که موردنظر شما بوده است را با جزییات کاملی در queue جمع آوری می کنید، اما راهی برای استفاده از این اطلاعات در تگ ها و متغیرهای گوگل تگ منیجر نخواهید داشت.
در این مقاله یاد می گیریم چطور از اطلاعاتی که برای ارسال یک ایونت در gtag.js استفاده شده، می توان برای ایجاد یک ایونت custom و متغیرهای مورد نظر در تگ منیجر بهره برد.
در مثال زیر، توسط gtag.js ایونتی برای استفاده از ویجت چت پیاده سازی شده است:
gtag('event', 'Click on Chat', {
event_category: 'UX' ,
event_label: 'Android – Home Page Bottom' ,
value: 1 });
جزییاتی که در preview تگ منیجر قابل مشاهده است:
در این مثال گوگل آنالیتیکس ، 'Click on Chat' را به عنوان event action در نظر می گیرد. و این ایونت به object مربوط به دیتالیر ارسال (push) می شود. از این event name می توانیم به عنوان trigger برای تگ های خود استفاده کنیم.
همچنین جزییات ارسال شده به دیتالیر را می توان در کنسول مرورگر مشاهده کرد:
برای استفاده از پارامترهای دیگر ایونت به عنوان متغیرهایی از جنس dataLayer اما، نمی توانیم از راه معمول ساختن متغیرهای dataLayer یعنی استفاده از جزییات پارامتر به عنوان Data Layer Variable Name اقدام کنیم.
همانطور که در نسخه preview تگ منیجر مشخص بود، این پارامترها داخل کلید eventModelقرار گرفته اند. لذا برای استفاده از آنها در ساختن متغیرهایی از جنس dataLayer، لازم ست این mapping استفاده کنیم:
- به جای استفاده از پارامتر ‘event_category‘ در نام متغیر، از ‘eventModal.event_category’ استفاده کنیم.
- به جای استفاده از پارامتر ‘event_label’ در نام متغیر، از ‘eventModal.event_label’ استفاده کنیم.
- به جای استفاده از پارامتر ‘event_value’ در نام متغیر، از ‘eventModal.event_value’ استفاده کنیم.
با روش بیان شده در بالا، قادر خواهیم بود پارامترهای ایونت های GA4 که ساختار مرسوم ایونت های Universal یعنی “category,action,label” ندارند را هم فراخوانی و استفاده کنیم.
در ادامه مثالی را برای ایونت های GA4 خواهیم دید.
برای ایونتی که روی شروع مرحله تایید اطلاعات پیاده سازی شده است، صفحه ای که کاربر تصمیم به شروع این فرآیند گرفته است را به عنوان پارامتر ارسال می کنیم.
در نسخه preview تگ منیجر، جزییات ارسال شده برای این ایونت را به صورت زیر خواهید دید:
و در object مربوط به دیتالیر در کنسول مرورگر هم این جزییات قابل مشاهده است:
برای بازخوانی و استفاده از پارامتر مربوط به این ایونت لازم است در نام متغیر خود به جای ‘verification_step’ از ‘eventModel.verification_step’ استفاده کنیم.
و در نهایت قادر خواهیم بود از این متغیر در پارامتر مربوط به تگ GA4 آن ایونت استفاده کنیم.
همچنین، چنانچه اکانت گوگل آنالیتک یونیورسال خود را با gtag.js پیاده سازی کرده اید، می توانید از همان تگ ها برای ساختن property مربوط به GA4 استفاده کنید. در اینجا می توانید بیشتر در این مورد مطالعه کنید.
در صورتیکه از این روش استفاده کنید، مقادیر "category,action,label" مربوط به ایونت های یونیورسال شما به صورت خودکار به عنوان پارامترهای ایونت مربوط به GA4 درنظر گرفته خواهد شد. به عبارتی:
- مقدار Event action شما، به عنوان Event name شما در property مربوط به GA4 شناخته خواهد شد.
- مقادیر Event category,label,value ، هم به عنوان پارامترهای Event شما در property مربوط به GA4 در نظر گرفته خواهد شد.
مثال: ساختاری که برای یک ایونت در property مربوط به یونیورسال توسط gtag.js پیاده سازی می شود به صورت زیر می باشد:
gtag('event', <action>, {
'event_category': <category>,
'event_label': <label>,
'value': <value>
});
این ایونت در property مربوط به GA4 روی این ساختار سوار خواهد شد:
gtag('event', <event_name>, {
<parameter_1>: <parameter_1_value>,
<parameter_2>: <parameter_2_value>,
<parameter_3>: <parameter_3_value>,
...
});
مقدار <action> مربوط به property یونیورسال ، به <event_name> در property مربوط به GA4 مپ خواهد شد و 'event_category'، 'event_label'و 'value' و مقادیر آنها به عنوان پارامترهای آن ایونت در نظر گرفته خواهد شد.
امیدوارم اگر با gtag.js کار می کنید، این مقاله برای شما مفید واقع شود.
