راهنمای شروع سریع قالب های سفارشی

الگوهای سفارشی به شما این امکان را می دهند که تگ و تعاریف متغیر خود را بنویسید تا دیگران در سازمان شما بتوانند از آنها در کنار تگ های داخلی و الگوهای متغیر استفاده کنند. ماهیت مجوز محور و جعبه شنی قالب‌های سفارشی، نوشتن برچسب‌ها و متغیرهای سفارشی را به شیوه‌ای ایمن‌تر و کارآمدتر از زمانی که از تگ‌های HTML سفارشی و متغیرهای جاوا اسکریپت سفارشی استفاده می‌کنید، ممکن می‌سازد.

تگ های سفارشی و قالب های متغیر در قسمت Templates در گوگل تگ منیجر تعریف شده اند. صفحه اصلی الگوها، هر برچسب یا الگوی متغیری را که قبلاً در ظرف شما تعریف شده اند، فهرست می کند. شما همچنین می توانید قالب های جدید را از این صفحه ایجاد کنید.

می‌توانید یک الگو را صادر کنید و آن را با دیگران در سازمان خود به اشتراک بگذارید، و می‌توان الگوها را برای توزیع گسترده‌تر در گالری الگوهای انجمن توسعه داد.

ویرایشگر قالب

ویرایشگر قالب شما را قادر می سازد تا الگوهای سفارشی را ایجاد، پیش نمایش و آزمایش کنید. دارای چهار قسمت اصلی برای ورودی است که به شما کمک می کند الگوی برچسب خود را تعریف کنید:

  • اطلاعات - ویژگی های اصلی الگو، مانند برچسب یا نام متغیر و نماد را تعریف کنید.
  • فیلدها - این یک ویرایشگر بصری برای اضافه کردن فیلدهای ورودی به الگوی برچسب شما است.
  • کد - جاوا اسکریپت sandboxed را وارد کنید تا مشخص کنید برچسب یا متغیر شما چگونه باید رفتار کند.
  • مجوزها - مشاهده و محدودیت هایی را برای کارهایی که برچسب یا متغیر شما مجاز به انجام آن هستند، تعیین کنید.

اولین الگوی تگ سفارشی خود را ایجاد کنید

این مثال شما را با نحوه ایجاد یک تگ پیکسلی مثال آشنا می کند. هنگامی که این برچسب در یک صفحه وب فعال می شود، یک ضربه با اطلاعات حساب صحیح به سرورهای ارائه دهنده برچسب ارسال می کند.

1. برای شروع اولین الگوی خود، روی Templates در ناوبری سمت چپ کلیک کنید و روی دکمه New در زیر بخش Tag Templates کلیک کنید.

2. روی Info کلیک کنید و نام برچسب (الزامی)، توضیحات و نماد را تعریف کنید.

نام چیزی است که وقتی کاربران برای پیاده سازی این تگ در سرتاسر رابط کاربری تگ منیجر می روند به آنها ارائه می شود.

توضیحات دقیقاً همان چیزی است که به نظر می رسد - شرح مختصری (200 کاراکتر یا کمتر) از آنچه این برچسب انجام می دهد.

نماد به شما امکان می‌دهد تصویری را انتخاب کنید که وقتی برچسب در لیست‌هایی که از ویژگی نماد پشتیبانی می‌کنند نمایش داده می‌شود. تصاویر نماد باید فایل‌های مربعی PNG، JPEG یا GIF باشند که بزرگ‌تر از 50 کیلوبایت نباشند و حداقل 64 پیکسل در 64 پیکسل باشند.

3. برای پیش نمایش الگوی خود، روی Refresh کلیک کنید.

در سمت راست ورودی های فیلد، یک پنجره پیش نمایش الگو وجود دارد. هر بار که تغییری در ویرایشگر ایجاد می شود، دکمه Refresh ظاهر می شود. روی Refresh کلیک کنید تا ببینید تغییرات شما با ظاهر تگ شما چه می کند.

4. برای افزودن فیلدها به الگوی برچسب خود، روی فیلدها کلیک کنید.

برگه فیلدهای ویرایشگر الگو به شما امکان می دهد فیلدهایی را در قالب برچسب ایجاد و ویرایش کنید. از فیلدها برای وارد کردن داده های سفارشی مانند شناسه حساب استفاده می شود. می‌توانید عناصر فرم استاندارد مانند فیلدهای متنی، منوهای کشویی، دکمه‌های رادیویی و کادرهای انتخاب را اضافه کنید.

5. روی Add Field کلیک کنید و Text input را انتخاب کنید. نام پیش‌فرض (مثلاً "text1" ) را با "accountId" جایگزین کنید. در پیش نمایش الگو ، روی Refresh کلیک کنید.

فیلد دارای انتخابگر متغیر آشنا ( نماد انتخابگر متغیر ) نماد کنار آن. کاربران این الگو می توانند با کلیک بر روی نماد انتخاب متغیر متغیرهای فعال در این ظرف را انتخاب کنند.

مرحله بعدی اضافه کردن یک برچسب به فیلد است:

6. روی نماد گسترش کلیک کنید ( نماد گسترش ) در کنار فیلد متنی برای باز کردن گزینه های بیشتری برای این فیلد. در قسمت نمایش نام " شناسه حساب " را وارد کنید. در پیش نمایش الگو ، روی Refresh کلیک کنید.

یک برچسب متنی با عنوان " شناسه حساب " باید در بالای فیلد ظاهر شود.

7. روی تب Code کلیک کنید و جاوا اسکریپت sandboxed را در ویرایشگر وارد کنید:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

خط اول کد، const sendPixel = require('sendPixel') ، sendPixel API را وارد می‌کند.

خط دوم کد، const encodeUriComponent = require('encodeUriComponent') ، API encodeUriComponent را وارد می‌کند.

خط بعدی، const account = data.accountId; ، مقدار accountId را که در مرحله 5 ایجاد شده بود دریافت می کند و آن را در یک ثابت به نام account ذخیره می کند.

خط سوم کد، const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account); ، یک url ثابت را تنظیم می کند که یک نقطه پایانی URL ثابت را به هم متصل می کند که داده های تجزیه و تحلیل و شناسه حساب رمزگذاری شده را که برچسب با آن پیکربندی شده است را ثبت می کند.

خط آخر، sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure) تابع sendPixel() را با پارامترهای مورد نیاز اجرا می کند و درخواستی را به URL مشخص شده ارسال می کند. مقادیر data.gtmOnSuccess و data.gtmOnFailure به Google Tag Manager می‌گویند که چه زمانی تگ وظیفه خود را کامل کرده یا ناموفق بوده است و سپس توسط Google Tag Manager برای ویژگی‌هایی مانند توالی برچسب یا حالت پیش‌نمایش استفاده می‌شود.

8. برای ذخیره پیشرفت خود روی Save کلیک کنید. با این کار هر مجوز شناسایی شده در ویرایشگر الگو بارگیری می شود.

برخی از APIهای الگو دارای مجوزهای مرتبط با آنها هستند که به آنها دیکته می کند که چه کاری می توانند یا نمی توانند انجام دهند. وقتی از یک API الگو مانند sendPixel در کد خود استفاده می کنید، Tag Manager مجوزهای مربوطه را در برگه Permissions نشان می دهد.

9. روی مجوزها کلیک کنید تا مشخص شود که sendPixel به چه دامنه هایی اجازه ارسال داده را دارد. برای ورودی Send Pixels ، روی نماد گسترش ( نماد گسترش ) و https://endpoint.example.com/ را در الگوهای مطابقت URL مجاز وارد کنید.

هنگامی که یک الگوی برچسب برای ارسال داده پیکربندی می شود، باید یک الگوی مطابقت URL مجاز را در زیر مجوز مرتبط تعیین کنید تا جایی که می توان داده ها را به آن ارسال کرد محدود شود. اگر URL مشخص شده در کد شما با الگوی مطابقت URL مجاز مطابقت نداشته باشد، تماس sendPixel ناموفق خواهد بود.

یک الگوی مطابقت URL باید از HTTPS استفاده کند و الگوهای میزبان و مسیر را مشخص کند. میزبان می تواند یک دامنه (به عنوان مثال " https://example.com/ ") یا یک زیر دامنه خاص (به عنوان مثال " https://sub.example.com/ ") باشد. مسیر باید حداقل از یک " / " تشکیل شده باشد. برای نشان دادن یک زیر دامنه یا الگوی مسیر با هر طولی (مثلاً " https://\*.example.com/test/ ") از یک ستاره ( * ) به عنوان علامت عام استفاده کنید. ستاره یک کاراکتر عام است که الگوهای مختلف ممکن را می‌گیرد، مثلاً " \*.example.com/ " با www.example.com ، shop.example.com ، blog.example.com ، و غیره مطابقت دارد. ستاره باید باشد با یک کاراکتر بک اسلش فرار کرد: " \* ". یک URL بدون نویسه اضافی (مثلاً " https://example.com/ ") به عنوان یک علامت عام ختم می شود (یعنی معادل " https://example.com/\* ".

الگوهای تطبیق URL اضافی را در خطوط جداگانه مشخص کنید.

10. روی Run Code کلیک کنید و برای هر گونه مشکل به پنجره Console نگاه کنید.

هر خطای شناسایی شده در پنجره کنسول ظاهر می شود.

11. روی ذخیره کلیک کنید و ویرایشگر الگو را ببندید.

اکنون الگوی برچسب باید برای استفاده آماده باشد.

از تگ جدید خود استفاده کنید

فرآیند ایجاد یک تگ جدید که از الگوی تگ سفارشی جدید تعریف شده شما استفاده می کند، مانند هر تگ دیگری است:

  1. در Google Tag Manager، روی Tags > New کلیک کنید.
  2. تگ جدید شما در قسمت Custom پنجره New Tag ظاهر می شود. روی آن کلیک کنید تا الگوی برچسب باز شود.
  3. فیلدهای لازم برای پیکربندی الگوی برچسب را پر کنید.
  4. روی Triggering کلیک کنید و یک ماشه مناسب برای زمانی که برچسب باید فعال شود را انتخاب کنید.
  5. برچسب را ذخیره کنید و ظرف خود را منتشر کنید.

اولین الگوی متغیر سفارشی خود را ایجاد کنید

الگوهای متغیر سفارشی مشابه الگوهای برچسب هستند، با چند تفاوت قابل توجه:

  • الگوهای متغیر سفارشی باید مقداری را برگردانند.

    به‌جای فراخوانی data['gtmOnSuccess'] برای نشان دادن تکمیل، متغیرها مستقیماً یک مقدار را برمی‌گردانند.

  • الگوهای متغیرهای سفارشی در بخش‌های مختلف رابط کاربری Tag Manager استفاده می‌شوند.

  • به جای رفتن به Tags > New برای ایجاد یک متغیر جدید بر اساس متغیر سفارشی خود، به Variables > New بروید.

برای راهنمای کامل ایجاد یک الگوی متغیر سفارشی، ایجاد یک متغیر سفارشی را ببینید.

صادرات و واردات

برای اشتراک‌گذاری یک الگوی سفارشی با سازمان خود، می‌توانید الگوی سفارشی را صادر کرده و آن را به سایر ظروف Tag Manager وارد کنید. برای صادرات یک الگو:

  1. در Tag Manager، روی Templates کلیک کنید.
  2. روی نام قالبی که می خواهید از لیست صادر کنید کلیک کنید. با این کار قالب در ویرایشگر قالب باز می شود.
  3. روی منوی اقدامات بیشتر ( ) کلیک کنید و صادرات را انتخاب کنید.

برای وارد کردن یک الگو:

  1. در Tag Manager، روی Templates کلیک کنید.
  2. روی New کلیک کنید. با این کار یک الگوی خالی در ویرایشگر الگو باز می شود.
  3. روی منوی اقدامات بیشتر ( ) کلیک کنید و Import را انتخاب کنید.
  4. فایل .tpl را که می خواهید وارد کنید انتخاب کنید.