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

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

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

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

محرّر النماذج

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

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

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

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

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

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

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

الوصف هو ما يشير إليه مضمونها، أي وصف مختصر (200 حرف أو أقل) لما تفعله هذه العلامة.

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

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

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

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

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

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

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

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

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

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

7. انقر على علامة التبويب الرمز وأدخِل 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 API.

يحصل السطر التالي، 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 في رمزك، ستعرض أداة "إدارة العلامات من Google" الأذونات ذات الصلة في علامة تبويب الأذونات.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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