دليل البدء السريع للنماذج المخصّصة

تسمح لك النماذج المخصّصة بكتابة علامتك وتعريفاتها المتغيرة حتى يتمكن الآخرون في مؤسستك من استخدامها إلى جانب العلامة المضمّنة والنماذج المتغيرة. إنّ الطبيعة التي تركّز على الأذونات ووضع الحماية للنماذج المخصّصة تتيح إمكانية كتابة علامات ومتغيرات مخصّصة بطريقة أكثر أمانًا وفعالية من ذي قبل عند استخدام علامات HTML المخصّصة ومتغيرات JavaScript المخصّصة.

يتم تحديد العلامة المخصّصة ونماذج المتغيّرات في قسم النماذج من "إدارة العلامات من Google". ستدرج شاشة "النماذج" الرئيسية أي علامة أو نماذج متغيّرة تم تحديدها من قبل في الحاوية. يمكنك أيضًا إنشاء نماذج جديدة من هذه الشاشة.

يمكنك تصدير نموذج ومشاركته مع الآخرين في مؤسستك، كما يمكن تطوير نماذج لتوزيعها على نطاق أوسع في معرض نماذج المنتدى.

محرر النماذج

يمكّنك محرر النماذج من إنشاء نماذج مخصصة ومعاينتها واختبارها. ويحتوي هذا النموذج على أربعة مجالات أساسية للإدخال لمساعدتك في تحديد نموذج علامتك:

  • معلومات - حدد الخصائص الأساسية للنموذج، مثل العلامة أو اسم المتغير والرمز.
  • الحقول - هذا محرّر مرئي لإضافة حقول الإدخال إلى نموذج علامتك.
  • الشفرة - أدخل جافا سكريبت في وضع الحماية لتحديد كيفية عمل العلامة أو المتغير.
  • الأذونات - يمكنك عرض وتعيين حدود الأمور المسموح بها للعلامة أو المتغير.

إنشاء نموذج العلامة المخصصة الأول

سيوضح لك هذا المثال كيفية إنشاء مثال لعلامة بكسل أساسية. وعند تنشيط هذه العلامة على صفحة ويب، سيتم إرسال نتيجة تحتوي على معلومات الحساب الصحيحة إلى خوادم موفِّر العلامة.

1. لبدء النموذج الأول، انقر على "النماذج" في شريط التنقل الأيمن، ثم انقر على الزر جديد ضمن القسم نماذج العلامات.

2- انقر على المعلومات وحدِّد اسم العلامة (مطلوب) والوصف والرمز.

الاسم هو ما سيتم عرضه للمستخدمين عند انتقالهم إلى تنفيذ هذه العلامة في واجهة مستخدم "إدارة العلامات".

إنّ الوصف هو مجرّد وصف، موجز (لا يزيد طوله عن 200 حرف) ويشرح أداء هذه العلامة.

يتيح لك الرمز اختيار صورة ستظهر عند عرض العلامة في القوائم التي تدعم خاصية الرمز. يجب أن تكون صور الرموز على شكل ملفات PNG أو JPEG أو GIF مربّعة لا يزيد حجمها عن 50 كيلوبايت ولا يقل حجمها عن 64 بكسل × 64 بكسل.

3- انقر على إعادة تحميل لمعاينة النموذج.

على يسار إدخالات الحقل، توجد نافذة معاينة النموذج. وفي كل مرة يتم فيها إجراء تغيير في المحرر، سيظهر الزر تحديث. انقر على "تحديث" لمعرفة التغييرات التي أجريتها على مظهر علامتك.

4- انقر على الحقول لإضافة حقول إلى نموذج علامتك.

تتيح لك علامة التبويب الحقول في "محرر النماذج" إنشاء حقول وتعديلها في نموذج العلامة. تُستخدم الحقول لإدخال بيانات مخصصة، مثل رقم تعريف الحساب. يمكنك إضافة عناصر النموذج القياسي مثل حقول النص، والقوائم المنسدلة، وأزرار الاختيار، ومربعات الاختيار.

5- انقر على إضافة حقل واختَر إدخال النص. استبدل الاسم الافتراضي (مثل "text1") بـ "accountId". في معاينة النموذج، انقر على إعادة تحميل.

سيظهر في الحقل رمز محدد المتغير المعتاد (رمز أداة اختيار المتغيّرات) بجواره. يمكن لمستخدمي هذا النموذج النقر على رمز أداة اختيار المتغيّرات لاختيار المتغيّرات النشطة في هذه الحاوية.

الخطوة التالية هي إضافة تصنيف إلى الحقل:

6- انقر على رمز التوسيع (رمز التوسيع) بجانب حقل النص لفتح المزيد من الخيارات لهذا الحقل. أدخل "رقم تعريف الحساب" في الحقل اسم العرض. في معاينة النموذج، انقر على إعادة تحميل.

يجب أن يظهر تصنيف نصي بعنوان "رقم تعريف الحساب" أعلى الحقل.

7- انقر على علامة التبويب Code (الرمز) وأدخِل JavaScript في وضع الحماية في المحرِّر:

// 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') واجهة برمجة تطبيقات 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" بالوقت الذي تكون فيه العلامة قد أكملت مهمتها أو يتعذّر عليها، ثم تستخدمها أداة "إدارة العلامات من Google" لميزات مثل تسلسل العلامات أو وضع المعاينة.

8- انقر على حفظ لحفظ تقدمك. سيؤدي ذلك إلى تحميل أي أذونات تم اكتشافها إلى "محرر النماذج".

تحتوي بعض واجهات برمجة تطبيقات النماذج على أذونات مرتبطة بها توضح ما يمكنه فعله أو ما لا يمكنه القيام به. عند استخدام واجهة برمجة تطبيقات لنموذج مثل sendPixel في شفرتك، ستعرض إدارة العلامات الأذونات ذات الصلة في علامة التبويب أذونات.

9- انقر على الأذونات لتحسين النطاقات التي يُسمح لـ sendPixel بإرسال بيانات إليها. بالنسبة إلى الإدخال إرسال وحدات البكسل، انقر على رمز التوسيع (رمز التوسيع) وأدخِل https://endpoint.example.com/ في أنماط مطابقة عناوين URL المسموح بها.

عند ضبط نموذج العلامة لإرسال البيانات، يجب تحديد نمط مطابقة عنوان URL المسموح به ضمن الإذن المرتبط لتحديد الوجهة التي يمكن إرسال البيانات إليها. وإذا لم يتطابق عنوان URL المحدّد في الرمز مع نمط مطابقة عنوان URL مسموح به، سيتعذّر طلب sendPixel.

يجب أن يستخدم نمط مطابقة عنوان URL بروتوكول HTTPS ويحدد كلاً من أنماط المضيف والمسار. يمكن أن يكون المضيف نطاقًا (مثل "https://example.com/") أو نطاقًا فرعيًا محددًا (مثل "https://sub.example.com/"). ويجب أن يتكون المسار من علامة "/" على الأقل. ويمكنك استخدام علامة النجمة (*) كحرف بدل للإشارة إلى نطاق فرعي أو نمط مسار بأي طول (على سبيل المثال ".https://\*.example.com/test/").

حدد أنماط مطابقة إضافية لعنوان URL على أسطر منفصلة.

10- انقر على تشغيل الرمز وابحث في نافذة وحدة التحكّم عن أي مشاكل.

ستظهر أي أخطاء تم اكتشافها في نافذة وحدة التحكم.

11- انقر على حفظ، وأغلق محرر النماذج.

يجب أن يكون نموذج العلامة جاهزًا للاستخدام الآن.

استخدام علامتك الجديدة

تشبه عملية إنشاء علامة جديدة تستخدم نموذج العلامة المخصصة الذي تم تحديده حديثًا مثل أي علامة أخرى:

  1. في أداة "إدارة العلامات من Google"، انقر على العلامات > جديد.
  2. ستظهر علامتك الجديدة في قسم مخصص من نافذة علامة جديدة. انقر عليه لفتح نموذج العلامة.
  3. املأ الحقول اللازمة لتهيئة نموذج العلامة.
  4. انقر على تشغيل واختَر عاملاً مناسبًا للوقت المناسب لإطلاق العلامة.
  5. احفظ العلامة وانشر الحاوية.

إنشاء نموذج المتغير المخصّص الأول

تتشابه نماذج المتغيرات المخصّصة مع نماذج العلامات، مع وجود بعض الاختلافات الملحوظة:

  • يجب أن تعرض نماذج المتغيرات المخصصة قيمة.

    بدلاً من طلب data['gtmOnSuccess'] للإشارة إلى الاكتمال، تعرض المتغيرات القيمة مباشرةً.

  • يتم استخدام نماذج المتغيرات المخصّصة في أجزاء مختلفة من واجهة مستخدم "إدارة العلامات".

  • بدلاً من الانتقال إلى العلامات > جديد لإنشاء متغير جديد استنادًا إلى المتغير المخصّص، انتقِل إلى المتغيّرات > جديد

اطّلِع على إنشاء متغيّر مخصَّص للحصول على دليل كامل لإنشاء نموذج متغير مخصَّص.

التصدير والاستيراد

لمشاركة نموذج مخصص مع مؤسستك، يمكنك تصدير النموذج المخصص واستيراده إلى حاويات أخرى في إدارة العلامات. لتصدير نموذج:

  1. في "إدارة العلامات"، انقر على النماذج.
  2. انقر على اسم النموذج الذي تريد تصديره من القائمة. سيفتح هذا النموذج في محرر النماذج.
  3. انقر على قائمة إجراءات أخرى () وحدد تصدير.

لاستيراد نموذج:

  1. في "إدارة العلامات"، انقر على النماذج.
  2. انقر على New (جديد). سيؤدي ذلك إلى فتح نموذج فارغ في محرر النماذج.
  3. انقر على القائمة إجراءات إضافية () وحدد استيراد.
  4. اختَر ملف .tpl الذي تريد استيراده.