اگه روی سایتتون ویدیو داشته باشید، قاعدتا اینجا نیاز به video tracking تو GA4 هم دارید.اگه دیتای تعداد کاربرانی که یه ویدیو رو تا آخر دیدن، تعداد کاربرانی که بیش از ۵ ثانیه از یه ویدیو رو دیدن یا یه سری از دیتاها رو درباره ویدیوی سایتتون رو نیاز دارید که بدونید، این پست بهتون قراره کمک کنه.
البته اینم بگم، ایونت Video engagement جزو Enhanced Measurmentهای خود آنالیتیکس هست و میشه تیکش رو زد و فعالش کرد. ولی بدبختی این ایونت فقط برای ویدیوهای YouTube به کار میاد که ما تو ایران کمتر ازش استفاده می‌کنیم.
اگه ویدیو آپارات باشه هم که هیچی، اصلا نیمشه براش تگ بسازیم. ولی خبر خوب اینکه اگه ویدیو به صورت html5 باشه (یعنی ویدیوهای عادی ای که روی سایت خودمون قرار می‌دیم) در اون صورت می‌تونیم به شیوه زیر براش تگ بسازیم.
برای ساخت تگ ویدیو چندین راه وجود دارد. می‌توانیم قدم به قدم این تگ را بسازیم و توضیح دهیم. راه ساده‌تر استفاده از کانتینر آماده Tag Manager است که این تگها را در خود ذخیره داره.
برای دانلود کانتینر آماده تگ منیجر به سایت آنالیتیکس مانیا میرویم. در مرورگر خود عبارت زیر را جستجو کنید.
HTML5 Video Tracking Recipe for GA4 and GTM
صفحه زیر از سایت analyticsmania.com را باز می‌کنیم.
کانتینر آماده را دانلود می‌کنیم. این کانتینر با فرمت json ذخیره می‌شود.
به تگ منیجر میرویم. قسمت Adminرا باز می‌کنیم.
در این بخش برای آپلود کانتینری که دانلود کردیم، روی Import Container را کلیک می‌کنیم.
در این قسمت با کلیک بر دکمه Choose container file، کانتینری که دانلود کردیم را آپلود می‌کنیم.
از بخش Choose workspace هم Existing را انتخاب می‌کنیم تا در Workplace فعلی آپلود کنیم.
از آپشن‌های import تیک Merge را میزنیم و Overwrite conflicting tags, triggers and variables را انتخاب می‌کنیم ولی در اینجا اهمیتی ندارد.
حالا به بخش Workspace میرویم، دو تگ زیر در قسمت تگها به کانتینر ما اضافه شد.
فقط در تگ GA4 evnet - html5 video باید Measurement ID آنالیتیکس را اضافه کنیم.
حالا می‌توانیم با Previewگرفتن از تگ منیجر، فایر شدن تگ ویدیو را مشاهده کنیم. اما قبل از آن توضیحی درباره تگ‌های اضافه شده می‌دهیم.
۲ تگ زیر با اضافه کردن کانتینر ویدیو به کانتینر تگ منیجر ما اضافه می‌شود:
GA4 event - html5 video
cHTML - html5 video listener
تگ cHTML - html5 video listener از جنس Custom HTML است که کد زیر در آن نوشته شده است. این کد در هر صفحه‌ای که ویدیوی html5وجود داشته باشد، تعامل کاربر با ویدیو را ردیابی می‌کند. ایونت‌های مخلتف برای رویدادهای مختلف را تعریف می‌کند.(پخس، توقف، پیشرفت کاربر، پایان) وقتی این رویدادها رخ می‌دهند، اسکریپت موقعیت فعلی پخش را ذخیره کرده و داده‌ها را به data layer ارسال می‌کند.
در واقع این تگ، ایونت‌ها را محاسبه و در صورت فایر شدن روی صفحه pushمی‌کند.
تریگر این تگ از جنس Window Loaded است. با شرط اینکه در صفحه ویدیوی html5باشد، این تریگر فعال می‌شود.
این تگ از یک variable به نام cjs - is html5 player on a page استفاده می‌کند که در قسمت variableها از جنس Custom Javascript تعریف شده است و تابع زیر در آن ذخیره شده است. این تابع چک می‌کند آیا ویدیوی html5در صفحه وجود دارد؟
تگ دومی که ساخته شده است تگ GA4 event - html5 video است. این تگ زمانی فایر می‌شود که تغییری در تعامل کاربر و ویدیو اتفاق بیافتد.
این تگ با event name برابر با video_{{dlv -video_status}}فایر می‌شود. (variable ای با نام video_status از جنس دیتالایر در variableها ذخیره شده است.)
این تگ پارامترهای video_provider, video_percent و video_title را همراه با ایونت به آنالیتیکس ارسال می‌کند تا بتوانیم در explore آنالیتیکس با این پارامترها، گزارش را فیلتر کنیم.
تریگر این تگ نیز از نوع Custom HTML است تا بتواند هر زمان که وضعیت تعامل کاربر با ویدیو عوض می‌شود، فایر شود. ایونتی که به آنالیتیکس ارسال می‌شود در واقع video_pause، video_play video_complete و video_progress است.
حالا ما تگ‌های لازم رو در GA4 ساختیم. طبق معمول submit و publish می‌کنیم تا تگها روی سایت قرار بگیرند. اما مثل همیشه، قبلش Preview می‌گیریم تا از کارکرد تگها مطمئن بشیم.
آدرس صفحه ای که ویدیو در آن قرار دارد را وارد می‌کنیم.
با پخش ویدیو در صفحه باز شده، باید تریگر مربوطه فایر شده باشد. درون تگ مربوطه اطلاعات ارسالی را می‌توانید ببینید.
با ادامه دادن ویدیو، تگ ویدیو دوباره فایر می‌شود و می‌توانید تغییر پارامترهایی مثل video_percent را مشاهده کنید.
❌نکته مهم اینکه این تگ برای ویدیوهایی مثل آپارات و یوتیوب فایر نمی‌شود. ❌
برای ساخت این تگ می‌تونید در خود GA4 از بخش Admin>> Data Streams>> Enhacned Measurments تیکvideo tracking رو روشن کنید. البته چون این روش زیاد مطمئن نیست، توصیه نمی‌شه.
حالا برای اینکه تگ video tracking رو بسازیم، مطمئن می‌شیم که تیک video engagement تو بخش enhacned measurments فعال نیست. به تگ منیجر میرویم. برای ساخت تگ از بخش تریگرها دکمه New را میزنیم.
برای بخش triggering گزینه YouTube Video را انتخاب می‌کنیم.
در این بخش گزینه‌هایی که برای ارسال به آنالیتیکس می‌خواهیم را تیک میزنیم. من معمولا Start, Complete, Progress را تیک می‌زنم. در بخش progress percentage هم می‌توان درصدهای 25,50,75,90 را به شکل زیر اضافه کرد.
به بقیه تنظیمات دست نمی‌زنیم و نام تگ را می‌نویسیم و save می‌کنیم.
از قسمت variableها دکمه configure را میزنیم. (بخش built-in variableها)
مطمئن می‌شویم که همه این variableها اضافه شده اند.
برای ساخت تگ به بخش تگها میرویم و تگ جدید را اضافه می‌کنیم.
از بخش Tag Configuration گزینه Google Analytics:GA4 Event را انتخاب می‌کنیم. مطابق روال Measurment ID آنالیتیکس را اضافه می‌کنیم. (برای یادآوری: Measurment ID آنالیتیکس را می‌توان از GA4 بخش Admin و سپس کلیک بر روی Data stream پیدا کرد.)
در بخش Event name به شکل زیر _video را می‌نویسیم. سپس برای اضافه کردن variable دکمه اضافه کردن را میزنیم. از variableهایی که اضافه کرده بودیم، Video Status را اضافه می‌کنیم.
اسم ایونت مطابق شکل بالا می‌شود. در واقع اسم این ایونت با توجه به شرایط video_start, video_progress video_complete , می‌شود. حالا پارامترهایی که می‌خواهیم با ایونت ارسال شوند را اضافه می‌کنیم. مثلا پارامتر video_percent را می‌نویسیم. در بخش Valueها add را میزنیم.
در بخش variableها Video Percent را اضافه می‌کنیم.
به همین شکل پارامترهای زیر را می‌توانیم اضافه کنیم. دقت شود که نام پارامترها باید عینا اسامی زیر باشد:
video_percent
video_duration
video_provider
video_url
video_title
video_current_time
در بخش تریگرها هم تریگری که ساختیم را YouTube را اضافه می‌کنیم. تگ به شکل زیر خواهد بود.
تگ ساخته شد پس از submit و publish تگ روی سایت قرار می‌گیرد. حالا برای تست تگpreview می‌گیریم. تریگر YouTube بعد از اینکه ویدیو یوتیوب رو در تگ اسیستنت پخش کردیم باید فایر شده باشد.
