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

تسمح لك النماذج المخصّصة بكتابة علاماتك وتعريفات المتغيّرات الخاصة بك كي بحيث يمكن للآخرين داخل مؤسستك استخدامها إلى جانب العلامة المضمنة قوالب المتغيرات. طبيعة النماذج المخصّصة التي تركّز على الأذونات ووضع الحماية تتيح كتابة علامات ومتغيّرات مخصَّصة بطريقة أكثر أمانًا وكفاءة بدلاً من استخدام علامات 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() مع المعلمات المطلوبة وتطلب المحدد. تخبر قيمتا 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/"). علامة النجمة هي حرف بدل الحرف الذي سيرصد الأنماط المختلفة المحتملة، على سبيل المثال "\*.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"، انقر على العلامات > ميزة جديدة:
  2. ستظهر علامتك الجديدة في القسم مخصّص في نافذة علامة جديدة. انقر عليه لفتح نموذج العلامة.
  3. املأ الحقول اللازمة لضبط إعدادات نموذج العلامات.
  4. انقر على تشغيل واختَر مشغِّلاً مناسبًا عند ظهور العلامة يجب تنشيطها.
  5. احفظ العلامة وانشر حاويتك.

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

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

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

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

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

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

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

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

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

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

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

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