تاریخ انتشار: ۲۹ ژوئیه ۲۰۲۱
برچسب‌ها تکه‌کدهای طرف سومی هستند که معمولاً با مدیر برچسب در سایت درج می‌شوند. برچسب‌ها معمولاً برای بازاریابی و تجزیه‌وتحلیل استفاده می‌شوند.
تأثیر عملکرد برچسب‌ها و مدیران برچسب در سایت‌های مختلف بسیار متفاوت است. مدیران برچسب را می‌توان با پاکت مقایسه کرد: مدیر برچسب ظرفی را فراهم می‌کند، اما اینکه آن را با چه چیزی پر کنید و چگونه از آن استفاده کنید بیشتر به شما بستگی دارد.
در اینجا، فنون بهینه‌سازی برچسب‌ها و مدیران برچسب را برای عملکرد و «معیارهای کلیدی اصلی وب» بررسی می‌کنیم. اگرچه این سند به Google Tag Manager ارجاع می‌دهد، بسیاری از ایده‌های موردبحث برای مدیران برچسب دیگر قابل‌اجرا هستند.
تأثیر بر معیارهای کلیدی اصلی وب
«مدیران برچسب» اغلب می‌توانند با مصرف منابع موردنیاز برای بار کردن سریع صفحه و حفظ واکنش‌گرایی آن، به‌طور غیرمستقیم بر «معیارهای کلیدی وب» شما تأثیر بگذارند. پهنای باند می‌تواند صرف بارگیری جاوا اسکریپت مدیریت برچسب برای سایت‌های شما یا تماس‌های بعدی شود که این کار ایجاد می‌کند. زمان واحد پردازش مرکزی در رشته اصلی می‌تواند صرف ارزیابی و اجرای جاوا اسکریپت موجود در مدیر برچسب و برچسب‌ها شود.
بزرگ‌ترین نقاشی دارای محتوا (LCP) درطول زمان بار شدن صفحه بحرانی دربرابر رقابت پهنای باند آسیب‌پذیر است. علاوه‌براین، مسدود کردن رشته اصلی می‌تواند زمان پرداز زدن LCP را به‌تأخیر بیندازد.
تغییر چیدمان تجمعی (CLS) می‌تواند تحت‌تأثیر قرار گیرد، چه با به‌تأخیر انداختن بار کردن منابع حیاتی قبل‌از اولین پردازش، یا با تزریق محتوا به صفحه توسط مدیران برچسب.
تأخیر در تعامل‌ها (INP) مستعد رقابت CPU در رشته اصلی است و ما همبستگی بین اندازه مدیران برچسب و نمرات INP ضعیف‌تر را مشاهده کرده‌ایم.
نوع برچسب مناسب را انتخاب کنید
تأثیر برچسب‌ها بر عملکرد بسته به نوع برچسب متفاوت است. به‌طور کلی، برچسب‌های تصویر («پیکسل‌ها») بهترین عملکرد را دارند، سپس الگوهای سفارشی، و درنهایت برچسب‌های HTML سفارشی. برچسب‌های فروشنده بسته به عملکردی که مجاز می‌کنند متفاوت است.
به‌خاطر داشته باشید که نحوه استفاده شما از برچسب تأثیر زیادی بر عملکرد آن دارد. «پیکسل‌ها» عمدتاً به‌دلیل ماهیت این نوع برچسب که محدودیت‌های شدیدی بر نحوه استفاده از آن‌ها اعمال می‌کند، عملکرد بسیار بالایی دارند؛ برچسب‌های HTML سفارشی لزوماً همیشه برای عملکرد بد نیستند، اما به‌دلیل سطح آزادی که به کاربران ارائه می‌دهند، به‌راحتی می‌توان از آن‌ها به‌گونه‌ای سوءاستفاده کرد که برای عملکرد مضر باشد.
هنگام فکر کردن درباره برچسب‌ها، مقیاس را درنظر داشته باشید: تأثیر عملکرد هر برچسب تکی ممکن است ناچیز باشد، اما وقتی ده‌ها یا صدها برچسب در یک صفحه استفاده می‌شود، می‌تواند قابل‌توجه باشد.
همه اسکریپت‌ها نباید با مدیر برچسب بار شوند
مدیران برچسب معمولاً بهترین راه برای بار کردن منابعی نیستند که جنبه‌های دیداری یا عملکردی فوری تجربه کاربری را پیاده‌سازی می‌کنند، مانند اعلان‌های کوکی، تصاویر اصلی، یا ویژگی‌های سایت. استفاده از مدیر برچسب برای بار کردن این منابع معمولاً تحویل آن‌ها را به‌تأخیر می‌اندازد. این امر برای تجربه کاربری بد است و همچنین می‌تواند سنجه‌هایی مانند LCP و CLS را افزایش دهد.
علاوه‌براین، برخی‌از کاربران مدیران برچسب را مسدود می‌کنند. استفاده از مدیر برچسب برای پیاده‌سازی ویژگی‌های تجربه کاربری ممکن است باعث شود وب‌سایت برای برخی‌از کاربران شما خراب شود.
مراقب برچسب‌های HTML سفارشی باشید
تگ‌های HTML
سفارشی
سال‌ها است که وجود دارند و در اکثر سایت‌ها به‌طور گسترده استفاده می‌شوند. برچسب‌های HTML سفارشی به شما امکان می‌دهند کد خود را با محدودیت‌های کمی وارد کنید، زیرا برخلاف نام آن، کاربرد اصلی این برچسب افزودن عناصر <script> سفارشی به صفحه است.
تگ‌های HTML سفارشی را می‌توان به روش‌های مختلفی استفاده کرد و تأثیر آن‌ها بر عملکرد به‌طور قابل‌توجهی متفاوت است. هنگام اندازه‌گیری عملکرد سایتتان، توجه داشته باشید که بیشتر ابزارها تأثیر عملکرد برچسب HTML سفارشی را به مدیر برچسبی که آن را تزریق کرده است نسبت می‌دهند—نه به خود برچسب.
برچسب‌های HTML سفارشی می‌توانند عنصری را در صفحه اطراف درج کنند. عمل درج عناصر در صفحه می‌تواند منبع مشکلات عملکرد باشد و در برخی موارد، همچنین باعث تغییرات چیدمان شود.
- در اکثر شرایط، اگر عنصری در صفحه درج شود، مرورگر باید اندازه و موقعیت هر مورد را در صفحه دوباره محاسبه کند. این فرایند به‌عنوان چیدمان شناخته می‌شود. تأثیر عملکرد یک چیدمان واحد حداقل است، اما وقتی بیش‌ازحد رخ دهد، می‌تواند به منبعی برای مشکلات عملکرد تبدیل شود. تأثیر این پدیده در دستگاه‌های رده‌پایین‌تر و صفحه‌هایی با تعداد زیاد عناصر DOM بیشتر است.
- اگر عنصر صفحه قابل‌مشاهده‌ای پس‌از رندر شدن ناحیه اطراف در DOM درج شود، می‌تواند باعث تغییر چیدمان شود. این پدیده منحصر به مدیران برچسب نیست—بااین‌حال، چون برچسب‌ها معمولاً دیرتر از بخش‌های دیگر صفحه بار می‌شوند، معمولاً پس‌از اینکه صفحه اطراف قبلاً رندر شده است، در DOM درج می‌شوند.
استفاده از الگوهای سفارشی
الگوهای سفارشی از برخی‌از عملیات‌های مشابه تگ‌های HTML سفارشی پشتیبانی می‌کنند اما براساس نسخه جعبه شنی جاوا اسکریپت ساخته شده‌اند که میاناهای برنامه‌سازی کاربردی را برای موارد استفاده رایج مانند تزریق اسکریپت و تزریق پیکسل ارائه می‌دهد. همان‌طور که از نام آن پیداست، این ویژگی به کاربر حرفه‌ای اجازه می‌دهد الگویی ایجاد کند که با درنظر گرفتن عملکرد ساخته شده است. سپس کاربران با دانش فنی کمتر می‌توانند از الگو استفاده کنند. این روش اغلب ایمن‌تر از ارائه دسترسی کامل به HTML سفارشی است.
به‌دلیل محدودیت‌های بیشتری که بر الگوهای سفارشی اعمال می‌شود، این برچسب‌ها بسیار کمتر احتمال دارد که مشکلات عملکردی یا امنیتی نشان دهند. به همین دلایل، الگوهای سفارشی برای همه موارد استفاده کار نمی‌کنند.
تزریق صحیح اسکریپت‌ها
استفاده از مدیر برچسب برای تزریق اسکریپت یک مورد استفاده بسیار رایج است. روش توصیه‌شده برای انجام این کار استفاده از «الگوی سفارشی» و
injectScript
API است.
برای اطلاعات بیشتر درباره استفاده از injectScript API برای تبدیل تگ HTML سفارشی موجود، به تبدیل تگ موجود مراجعه کنید.
اگر باید از برچسب HTML سفارشی استفاده کنید، به‌خاطر داشته باشید:
- کتابخانه‌ها و دستورگان‌های بزرگ طرف سوم باید با برچسب دستورگان بار شوند
(برای مثال،
<script src="external-scripts.js">) که فایل خارجی را بارگیری می‌کند، نه اینکه مستقیماً محتوای دستورگان را در برچسب کپی و جای‌گذاری کند. اگرچه صرف‌نظر کردن از استفاده از برچسب<script>یک رفت‌وبرگشت جداگانه برای بارگیری محتوای اسکریپت را حذف می‌کند، این عمل اندازه ظرف را افزایش می‌دهد و مانع از ذخیره جداگانه اسکریپت در حافظه نهان توسط مرورگر می‌شود. - بسیاری از فروشندگان توصیه می‌کنند برچسب
<script>آن‌ها در بالای<head>قرار داده شود. بااین‌حال، برای اسکریپت‌های بارشده با مدیر برچسب، این کار اغلب غیرضروری است. در اکثر شرایط، مرورگر تا زمانی که مدیر برچسب اجرا شود، تجزیه<head>را به‌پایان رسانده است.
استفاده از پیکسل‌ها
گاهی اوقات، اسکریپت‌های شخص ثالث را می‌توان با پیکسل‌های تصویر یا iframe جایگزین کرد. درمقایسه با همتایان مبتنی بر اسکریپت، پیکسل‌ها ممکن است از عملکرد کمتری پشتیبانی کنند، بنابراین اغلب به‌عنوان پیاده‌سازی کمتر ترجیحی دیده می‌شوند. بااین‌حال، وقتی پیکسل‌ها در مدیران برچسب استفاده می‌شوند، می‌توانند پویاتر باشند زیرا می‌توانند روی راه‌اندازها فعال شوند و متغیرهای مختلفی را منتقل کنند.
پیکسل‌ها کارآمدترین و ایمن‌ترین نوع برچسب هستند زیرا پس‌از فعال شدن، جاوا اسکریپت اجرا نمی‌شود. پیکسل‌ها اندازه منبع بسیار کوچکی دارند (کمتر از ۱ کیلوبایت) و باعث تغییر چیدمان نمی‌شوند.
برای کسب اطلاعات بیشتر درباره پشتیبانی از پیکسل‌ها، با ارائه‌دهنده طرف سوم خود تماس بگیرید. علاوه‌براین، می‌توانید کد آن‌ها را برای برچسب <noscript> بررسی کنید.
اگر فروشنده‌ای از پیکسل‌ها پشتیبانی کند، اغلب پیکسل را در برچسب
<noscript> قرار می‌دهد.
جایگزین‌های پیکسل‌ها
پیکسل‌ها عمدتاً به این دلیل محبوب شدند که زمانی یکی از ارزان‌ترین و قابل‌اعتمادترین روش‌ها برای ارسال درخواست HTTP در شرایطی بودند که پاسخ سرور اهمیتی نداشت ( برای مثال، هنگام ارسال داده به ارائه‌دهندگان تجزیه‌وتحلیل). میاناهای برنامه‌سازی کاربردی
navigator.sendBeacon()
و fetch() keepalive
برای رسیدگی به همین مورد استفاده طراحی شده‌اند اما مسلماً قابل‌اعتمادتر از پیکسل‌ها هستند.
ادامه استفاده از پیکسل‌ها هیچ مشکلی ندارد—آن‌ها به‌خوبی پشتیبانی می‌شوند و تأثیر حداقلی بر عملکرد دارند. بااین‌حال، اگر فانوس‌های خودتان را می‌سازید، ارزش دارد که استفاده از یکی از این APIها را درنظر بگیرید.
sendBeacon()
navigator.sendBeacon()
API برای ارسال مقادیر کمی از داده‌ها به سرورهای وب در شرایطی طراحی شده است که پاسخ سرور اهمیتی ندارد.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
navigator.sendBeacon(url, data);
sendBeacon() دارای API محدودی است: فقط از ایجاد درخواست‌های POST پشتیبانی می‌کند و
از تنظیم سرایندهای سفارشی پشتیبانی نمی‌کند. همه مرورگرهای نو از آن
پشتیبانی می‌کنند.
Fetch API keepalive
keepalive
پرچمی است که اجازه می‌دهد از Fetch
API برای
ایجاد درخواست‌های غیرمسدودکننده مانند گزارش رویداد و تجزیه‌وتحلیل استفاده شود. این روش با گنجاندن keepalive: true در پارامترهای ارسال‌شده به fetch() استفاده می‌شود.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
fetch(url, {
method: 'POST',
body: data,
keepalive: true
});
اگر fetch() keepalive و sendBeacon() خیلی شبیه به‌نظر می‌رسند، به این دلیل است که واقعاً شبیه هستند. درواقع، در مرورگرهای Chromium، sendBeacon() اکنون براساس fetch()
keepalive ساخته شده است.
هنگام انتخاب بین fetch() keepalive و sendBeacon()، مهم است که
ویژگی‌ها و پشتیبانی مرورگر موردنیازتان را درنظر بگیرید. fetch() API به‌طور قابل‌توجهی انعطاف‌پذیرتر است؛ بااین‌حال، keepalive نسبت‌به sendBeacon() پشتیبانی مرورگر کمتری دارد.
آشنایی با عملکرد برچسب‌ها
برچسب‌ها اغلب با پیروی از راهنمایی‌های ارائه‌شده توسط فروشنده طرف سوم ایجاد می‌شوند. اگر مشخص نیست کد فروشنده چه کاری انجام می‌دهد، از فردی که می‌داند بپرسید. دریافت نظر دوم می‌تواند به شناسایی اینکه آیا برچسبی پتانسیل ایجاد مشکلات عملکردی یا امنیتی دارد کمک کند.
توصیه می‌کنیم برچسب‌ها را با یک مالک در مدیر برچسب برچسب‌گذاری کنید. به‌راحتی فراموش می‌شود که مالک برچسب کیست، و این امر باعث می‌شود که از ترس خراب شدن چیزی، برچسب برداشته نشود!
راه‌اندازها
در سطح بالا، بهینه‌سازی راه‌اندازهای برچسب معمولاً شامل اطمینان از عدم راه‌اندازی برچسب‌ها بیش‌از حد لازم و انتخاب راه‌اندازی است که نیازهای کسب‌وکار را با هزینه‌های عملکرد متعادل می‌کند.
راه‌اندازها کد جاوا اسکریپت هستند که اندازه و هزینه اجرای مدیر برچسب را افزایش می‌دهند. اگرچه بیشتر محرک‌ها کوچک هستند، اما اثر تجمعی آن‌ها می‌تواند افزایش یابد. برای مثال، داشتن چندین رویداد کلیک یا راه‌انداز زمان‌سنج می‌تواند حجم کار مدیر برچسب را به‌طور چشمگیری افزایش دهد.
رویداد راه‌انداز مناسبی را انتخاب کنید
تأثیر برچسب بر عملکرد می‌تواند متفاوت باشد. به‌طور کلی، هرچه برچسب زودتر فعال شود، تأثیر بیشتری بر عملکرد دارد. منابع معمولاً درطول بارگیری اولیه صفحه محدود می‌شوند و بنابراین بارگیری یا اجرای یک منبع (یا برچسب) خاص، منابع را از چیز دیگری می‌گیرد.
اگرچه انتخاب راه‌اندازهای مناسب برای همه برچسب‌ها مهم است، اما این موضوع به‌ویژه برای برچسب‌هایی که منابع بزرگ را بارگیری می‌کنند یا اسکریپت‌های طولانی را اجرا می‌کنند، اهمیت دارد.
برچسب‌ها را می‌توان در
بازدیدهای صفحه
(معمولاً Page load، در DOM Ready، در Window Loaded) یا براساس یک
رویداد سفارشی راه‌اندازی کرد. برای جلوگیری از تأثیر بر بارگیری صفحه، برچسب‌های غیرضروری را پس‌از
Window Loaded فعال کنید.
استفاده از رویدادهای سفارشی
از رویدادهای سفارشی
برای فعال کردن راه‌اندازها در پاسخ به رویدادهای صفحه که تحت پوشش
راه‌اندازهای داخلی Google Tag Manager نیستند استفاده کنید. برای مثال، بسیاری از برچسب‌ها از راه‌اندازهای
بازدید صفحه استفاده می‌کنند. بااین‌حال،
زمان بین DOM Ready و Window Loaded می‌تواند طولانی باشد، بنابراین
تنظیم دقیق زمان فعال شدن برچسب دشوار می‌شود. رویدادهای سفارشی می‌توانند راه‌حلی برای
این مشکل باشند.
ابتدا، راه‌انداز رویداد سفارشی ایجاد کنید و برچسب‌هایتان را به‌روز کنید تا از این راه‌انداز استفاده کنید.
برای فعال کردن راه‌انداز، رویداد مربوطه را به لایه داده ارسال کنید.
// Custom event trigger that fires after 2 seconds
setTimeout(() => {
dataLayer.push({
'event' : 'my-custom-event'
});
}, 2000);
استفاده از شرایط راه‌انداز خاص
شرایط راه‌انداز خاصی را تعریف کنید تا از فعال شدن برچسب‌ها در مواقع غیرضروری جلوگیری شود. یکی از ساده‌ترین و مؤثرترین روش‌ها برای انجام این کار این است که مطمئن شوید برچسب فقط در صفحه‌هایی فعال می‌شود که واقعاً از آن استفاده می‌شود.
متغیرهای داخلی می‌توانند در شرایط راه‌انداز گنجانده شوند تا فعال شدن برچسب را محدود کنند.
مدیر برچسب را در زمان مناسب بار کنید
می‌توانید با تنظیم زمان بار شدن خود مدیر برچسب، عملکرد را بهبود دهید. راه‌اندازها، صرف‌نظر از نحوه پیکربندی‌شان، تا زمانی که مدیر برچسب بار نشود، نمی‌توانند فعال شوند. آزمایش کنید که چه زمانی مدیر برچسب را بار می‌کنید، زیرا این کار می‌تواند تأثیر برابر یا بیشتری داشته باشد. این تصمیم بر همه برچسب‌های صفحه تأثیر می‌گذارد.
با بار کردن مدیر برچسب در زمانی دیگر، می‌توانید از مشکلات عملکردی در آینده جلوگیری کنید، زیرا این کار از بار شدن ناخواسته برچسب در زمانی بسیار زود جلوگیری می‌کند.
متغیر
از متغیرها برای خواندن داده‌ها از صفحه استفاده کنید. این متغیرها در راه‌اندازها و در خود برچسب‌ها مفید هستند.
متغیرها مانند راه‌اندازها کد جاوا اسکریپت را به مدیر برچسب اضافه می‌کنند و بنابراین می‌توانند باعث مشکلات عملکرد شوند. متغیرها می‌توانند نسبتاً کوچک باشند، مانند کد برای خواندن بخش‌هایی از نشانی وب، کوکی‌ها، لایه داده، یا DOM. همچنین می‌توانند شامل جاوا اسکریپت سفارشی باشند که قابلیت (و اندازه) نامحدود دارد.
استفاده از متغیر را به حداقل برسانید، زیرا به‌طور مداوم توسط مدیر برچسب ارزیابی می‌شوند. متغیرهای قدیمی را که دیگر استفاده نمی‌شوند بردارید تا هم اندازه اسکریپت مدیر برچسب و هم زمان پردازشی که استفاده می‌کند کاهش یابد.
مدیریت برچسب
استفاده کارآمد از برچسب‌ها خطر مشکلات عملکرد را کاهش می‌دهد.
استفاده از لایه داده
لایه داده آرایه جاوا اسکریپت از اشیایی است که حاوی اطلاعاتی درباره صفحه است. این اشیاء حاوی تمام اطلاعاتی هستند که می‌خواهید به «مدیر برچسب Google» منتقل کنید.
از لایه داده می‌توان برای راه‌اندازی برچسب‌ها نیز استفاده کرد.
// Contents of the data layer
window.dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});
// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});
اگرچه می‌توان از Google Tag Manager بدون لایه داده استفاده کرد، اما استفاده از آن به‌شدت توصیه می‌شود. لایه داده، داده‌هایی را که اسکریپت‌های شخص ثالث می‌توانند به آن‌ها دسترسی داشته باشند در یک مکان واحد ادغام می‌کند و درنتیجه دید بهتری نسبت به استفاده از آن ارائه می‌دهد. ازجمله موارد دیگر، این کار می‌تواند به کاهش محاسبات متغیر زائد و اجرای اسکریپت کمک کند.
بااستفاده از لایه داده، می‌توانید کنترل کنید برچسب‌ها به چه داده‌هایی دسترسی داشته باشند، به‌جای اینکه دسترسی کامل به متغیر جاوا اسکریپت یا DOM بدهید.
مزایای عملکردی لایه داده ممکن است شهودی نباشد، زیرا به‌روزرسانی لایه داده باعث می‌شود Google Tag Manager همه متغیرهای محتوی را مجدداً ارزیابی کند و احتمالاً برچسب‌ها را فعال کند، که این امر مستلزم اجرای جاوا اسکریپت است. اگرچه ممکن است از لایه داده سوءاستفاده شود، اما به‌طور کلی، اگر به‌نظر برسد که لایه داده منبع مشکلات عملکرد است، احتمالاً خودِ محفظه مشکلات عملکرد دارد. لایه داده این مشکلات را آشکارتر می‌کند.
برداشتن برچسب‌های تکراری و استفاده‌نشده
برچسب‌های تکراری زمانی ممکن است رخ دهد که برچسبی علاوه‌بر تزریق شدن ازطریق مدیر برچسب، در نشانه‌گذاری HTML صفحه نیز گنجانده شده باشد.
برچسب‌های استفاده‌نشده باید به‌جای مسدود شدن ازطریق استفاده از استثنای راه‌انداز، موقتاً متوقف یا برداشته شوند. با موقتاً متوقف کردن یا برداشتن برچسب، کد از محفظه برداشته می‌شود؛ اما با مسدود کردن برداشته نمی‌شود.
وقتی برچسب‌های استفاده‌نشده برداشته می‌شوند، راه‌اندازها و متغیرها را مرور کنید تا مشخص شود که آیا آن‌ها هم می‌توانند برداشته شوند یا نه.
برچسب‌های موقتاً متوقف‌شده بر اندازه محفظه تأثیر می‌گذارند، اما کل بار مفید کوچک‌تر از زمانی است که برچسب‌ها فعال هستند.
استفاده از فهرست‌های مجاز و غیرمجاز
از فهرست‌های مجاز و غیرمجاز برای پیکربندی محدودیت‌های بسیار دقیق روی برچسب‌ها، راه‌اندازها، و متغیرهای مجاز در صفحه استفاده کنید. از این مورد می‌توان برای کمک به اجرای بهترین روال‌های عملکرد و سایر خط‌مشی‌ها استفاده کرد.
فهرست‌های مجاز و غیرمجاز ازطریق لایه داده پیکربندی می‌شوند.
window.dataLayer = [{
'gtm.allowlist': ['<id>', '<id>', ...],
'gtm.blocklist': ['customScripts']
}];
برای مثال، می‌توانید از استفاده از برچسب‌های HTML سفارشی، متغیرهای JavaScript، یا دسترسی مستقیم به DOM جلوگیری کنید. این یعنی فقط پیکسل‌ها و برچسب‌های ازپیش تعریف‌شده می‌توانند با داده‌های لایه داده استفاده شوند. اگرچه این کار محدودکننده است، می‌تواند منجر به پیاده‌سازی مدیر برچسب با عملکرد بهتر و ایمن‌تر شود.
استفاده از برچسب‌گذاری سمت سرور را درنظر بگیرید
ارزش دارد که به برچسب‌گذاری سمت سرور بروید، به‌ویژه برای سایت‌های بزرگ‌تر که می‌خواهند کنترل بیشتری روی داده‌هایشان داشته باشند. برچسب‌گذاری سمت سرور کد فروشنده را از کارخواه حذف می‌کند و با این کار، پردازش را از کارخواه به سرور منتقل می‌کند.
برای مثال، هنگام استفاده از برچسب‌گذاری سمت کارخواه، ارسال داده به چند حساب Analytics مستلزم این است که کارخواه درخواست‌های جداگانه‌ای برای هر نقطه پایانی آغاز کند. با برچسب‌گذاری سمت سرور، یک درخواست واحد توسط کارخواه به محفظه سمت سرور ارسال می‌شود و از آنجا، این داده‌ها به حساب‌های تجزیه‌وتحلیل مختلف بازارسال می‌شود.
به‌خاطر داشته باشید که برچسب‌گذاری سمت سرور فقط با برخی‌از برچسب‌ها کار می‌کند. سازگاری برچسب بسته به فروشنده متفاوت است.
برای اطلاعات بیشتر، مقدمه‌ای بر برچسب‌گذاری سمت سرور را ببینید.
Containers
مدیران برچسب معمولاً چندین نمونه را که اغلب به آن‌ها محفظه گفته می‌شود در راه‌اندازی خود مجاز می‌کنند. چندین محفظه را می‌توان در یک حساب مدیر برچسب کنترل کرد.
فقط از یک محفظه در هر صفحه استفاده کنید
وجود چند محفظه در یک صفحه می‌تواند مشکلات عملکردی قابل‌توجهی ایجاد کند، زیرا باعث ایجاد سربار اضافی و اجرای اسکریپت می‌شود. حداقل، خود کد برچسب اصلی را تکرار می‌کند که چون به‌عنوان بخشی از جاوا اسکریپت محفظه ارائه می‌شود، نمی‌تواند بین محفظه‌ها دوباره استفاده شود.
به‌ندرت پیش می‌آید که از چند ظرف به‌طور مؤثر استفاده شود. بااین‌حال، مواردی وجود دارد که این کار می‌تواند مؤثر باشد، اگر به‌خوبی کنترل شود. برای مثال:
- ازجمله یک محفظه سبک‌تر «بار اولیه» و یک محفظه سنگین‌تر «بار ثانویه»، به‌جای یک محفظه بزرگ.
- استفاده از محفظه محدودشده برای کاربران با دانش فنی کمتر و محفظه کمتر محدودشده، اما با کنترل دقیق‌تر، برای برچسب‌های پیچیده‌تر.
اگر باید از چند محفظه در هر صفحه استفاده کنید، راهنمای «مدیریت برچسب Google» را برای راه‌اندازی چند محفظه دنبال کنید.
درصورت نیاز، از ظرف‌های جداگانه استفاده کنید
اگر از مدیر برچسب برای چند دارایی، مثل برنامه وب و برنامه تلفن همراه، استفاده می‌کنید، تعداد محفظه‌هایی که استفاده می‌کنید می‌تواند به بهره‌وری گردش کارتان کمک کند یا به آن آسیب برساند. همچنین می‌تواند بر عملکرد تأثیر بگذارد.
اگر سایت‌ها ازنظر کاربرد و ساختار مشابه باشند، می‌توان از یک محفظه به‌طور مؤثر در چندین سایت استفاده کرد. برای مثال، اگرچه برنامه‌های وب و تلفن همراه یک نمانام ممکن است عملکردهای مشابهی داشته باشند، احتمالاً ساختار برنامه‌ها متفاوت است و بنابراین ازطریق محفظه‌های جداگانه به‌طور مؤثرتری مدیریت می‌شوند.
استفاده مجدد از یک محتوی به‌طور گسترده می‌تواند پیچیدگی و اندازه محتوی را با تحمیل منطق پیچیده برای مدیریت برچسب‌ها و راه‌اندازها افزایش دهد.
مراقب اندازه محتوا باشید
اندازه ظرف براساس برچسب‌ها، راه‌اندازها، و متغیرهای آن تعیین می‌شود. اگرچه یک محفظه کوچک ممکن است همچنان تأثیر منفی بر عملکرد صفحه داشته باشد، اما یک محفظه بزرگ تقریباً به‌طور قطع این تأثیر را خواهد داشت.
اندازه محفظه نباید مهم‌ترین سنجه هنگام بهینه‌سازی استفاده از برچسب باشد. بااین‌حال، اندازه بزرگ محفظه اغلب نشانه هشداردهنده‌ای است که محفظه به‌خوبی نگهداری نمی‌شود و احتمالاً از آن سوءاستفاده می‌شود.
Google Tag Manager اندازه محتوی را به ۳۰۰ کیلوبایت محدود می‌کند و پس‌از رسیدن به ۷۰٪ از حد مجاز اندازه، درباره اندازه محتوی هشدار می‌دهد.
اکثر سایت‌ها باید تلاش کنند تا اندازه محفظه‌هایشان را کوچک‌تر از محدودیت نگه دارند. برای مقایسه، ظرف سایت متوسط حدود ۵۰ کیلوبایت است. کتابخانه Google Tag Manager به‌تنهایی حدود ۳۳ کیلوبایت فشرده است.
نام‌گذاری نسخه‌های حامل شما
نسخه محفظه عکس آنی از محتوای محفظه در یک زمان خاص است. استفاده از نامی معنادار و افزودن شرحی کوتاه از تغییرات معنادار در آن می‌تواند کمک زیادی به تسهیل اشکال‌زدایی مشکلات عملکردی در آینده کند.
برچسب‌گذاری گردش‌های کار
مهم است که تغییرات برچسب‌هایتان را مدیریت کنید تا تأثیر منفی بر عملکرد صفحه نداشته باشند.
آزمایش قبل‌از استقرار
برچسب‌هایتان را قبل‌از استقرار آزمایش کنید تا مشکلات، عملکرد، و غیره را قبل‌از ارسال شناسایی کنید.
مواردی که باید هنگام آزمایش برچسب درنظر بگیرید عبارت‌اند از:
- آیا برچسب درست کار می‌کند؟
- آیا برچسب باعث تغییر چیدمان می‌شود؟
- آیا برچسب منبعی را بار می‌کند؟ این منابع چقدر بزرگ هستند؟
- آیا برچسب باعث اجرای اسکریپت طولانی می‌شود؟
حالت پیش‌نمایش
حالت پیش‌نمایش به شما امکان می‌دهد تغییرات برچسب را در سایت واقعی‌تان آزمایش کنید بدون اینکه لازم باشد ابتدا آن‌ها را برای عموم مستقر کنید. حالت پیش‌نمایش شامل کنسول اشکال‌زدایی است که اطلاعاتی درباره برچسب‌ها ارائه می‌دهد.
زمان اجرای «مدیر برچسب Google» هنگام اجرا در حالت «پیش‌نمایش» متفاوت (کمی کندتر) است چون برای نمایش اطلاعات در کنسول اشکال‌زدایی به سربار اضافی نیاز است. بنابراین، مقایسه اندازه‌گیری‌های Web Vitals جمع‌آوری‌شده در حالت پیش‌نمایش با اندازه‌گیری‌های جمع‌آوری‌شده در تولید توصیه نمی‌شود. بااین‌حال، این مغایرت نباید بر رفتار اجرایی خود برچسب‌ها تأثیر بگذارد.
آزمایش مستقل
رویکرد جایگزین برای آزمایش برچسب‌ها این است که صفحه خالی‌ای راه‌اندازی کنید که حاوی یک محفظه با یک برچسب باشد—برچسبی که درحال آزمایش آن هستید. این راه‌اندازی آزمایشی کمتر واقع‌گرایانه است و برخی مشکلات را شناسایی نمی‌کند (برای مثال، اینکه آیا برچسب باعث تغییر چیدمان می‌شود یا نه)—اما می‌تواند جداسازی و اندازه‌گیری تأثیر برچسب بر مواردی مانند اجرای اسکریپت را آسان‌تر کند. ببینید چطور Telegraph از این رویکرد جداسازی برای بهبود عملکرد کد طرف سوم استفاده می‌کند.
پایش عملکرد برچسب
از میانای برنامه‌سازی کاربردی پایش «مدیریت برچسب Google» می‌توان برای جمع‌آوری اطلاعات درباره زمان اجرای برچسبی خاص استفاده کرد. این اطلاعات به نقطه پایانی‌ای که انتخاب می‌کنید گزارش می‌شود.
برای اطلاعات بیشتر، به نحوه ساختن «پایشگر مدیر برچسب Google» مراجعه کنید.
الزام تأیید برای تغییرات محفظه
کد شخص اول معمولاً قبل‌از پیاده‌سازی تحت بازبینی و آزمایش قرار می‌گیرد. با برچسب‌هایتان یکسان رفتار کنید.
افزودن درستی‌سنجی دومرحله‌ای، که برای تغییرات محفظه به تأیید سرپرست نیاز دارد، یکی از راه‌های انجام این کار است. به‌عنوان جایگزین، اگر نمی‌خواهید درستی‌سنجی دومرحله‌ای را الزامی کنید اما همچنان می‌خواهید تغییرات را زیرنظر داشته باشید، می‌توانید اعلان‌های محفظه را راه‌اندازی کنید تا هشدارهای ایمیلی درباره رویدادهای محفظه انتخابی‌تان دریافت کنید.
استفاده از برچسب را به‌طور دوره‌ای ممیزی کنید
یکی از چالش‌های کار با برچسب‌ها این است که آن‌ها معمولاً درطول زمان انباشته می‌شوند: برچسب‌ها اضافه می‌شوند اما به‌ندرت برداشته می‌شوند. ممیزی دوره‌ای برچسب‌ها یکی از راه‌های معکوس کردن این روند است. دفعات ایده‌آل برای انجام این کار به این بستگی دارد که برچسب‌های سایت شما چند وقت یک‌بار به‌روزرسانی می‌شوند.
برچسب‌گذاری هر برچسب به‌گونه‌ای که مالک آن مشخص باشد، شناسایی فردی را که مسئول آن برچسب است و می‌تواند بگوید آیا هنوز به آن نیاز است یا نه، آسان‌تر می‌کند.
هنگام ممیزی برچسب‌ها، پاک‌سازی راه‌اندازها و متغیرها را فراموش نکنید. این برنامه‌ها اغلب می‌توانند دلیل مشکلات عملکردی نیز باشند.
برای اطلاعات بیشتر، به Keeping third-party scripts under control مراجعه کنید.