إنشاء إعلانات Gmail باستخدام شفرة HTML المخصصة

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

توضح هذه المقالة كيفية تهيئة إعلاناتك المخصصة على Gmail وتحميلها.

قبل البدء

مهم: ضع في اعتبارك أن إعلانات Gmail بشفرة HTML المخصّصة تحتفظ بتنسيق عنوان URL المقصود، ولا تتوافق مع روابط عناوين URL النهائية ونماذج التتبع. تعرّف على مزيد من المعلومات عن عناوين URL التي تمت ترقيتها.

التعليمات

إعلان Gmail بشفرة HTML المخصصة عبارة عن مجلد مضغوط بتنسيق ZIP يحتوي على كل الملفات لإعلانك المصغَّر والموسَّع. ولتجنب المشكلات، انتبه جيدًا لمواصفات التنسيق الصارمة التي ترد بالتفصيل أدناه.

في ما يلي حدود الحجم الإجمالية لإعلانك:

  • الحجم الإجمالي لمجلد ZIP‏: <‏ 1.25 ميغابايت
  • عدد الملفات: < 100 ملف
  • حجم الملف: < 500 كيلوبايت

كيفية إنشاء إعلانك المصغَّر

لإنشاء إعلانك المصغَّر، ستضيف ملفين إلى مجلد ZIP:

  • صورة الشعار (باسم "logo.png" أو "logo.jpg" أو "logo.gif")
  • الملف النصي (باسم "teaser.txt")

مواصفات صورة الشعار

يجب تسمية الملف بالضبط "logo.png" أو "logo.jpg" أو "logo.gif"، كما يجب أن يكون تنسيق الملف PNG أو JPG أو GIF.

  • حجم صورة الشعار: 144 بكسل × 144 بكسل كحدٍ أدنى مع نسبة عرض إلى ارتفاع 1:1
  • الحد الأقصى لحجم الملف: 150 كيلوبايت
  • تنسيقات الملف: PNG أو JPG أو GIF (غير متحرك)

صورة الشعار هي رمز أو رسم أو شعار علامة تجارية بحجم صغير.

سيتم عرض الصورة على هيئة مربّع 50 x‏ 50 على الأجهزة ذات درجة الدقة العادية، لكننا نقبل صورًا بحجم يصل إلى 150 كيلوبايت للحصول على عرض أكثر وضوحًا على بعض الشاشات.

مواصفات الملف النصي

يجب تسمية الملف "teaser.txt" بالضبط، كما يجب أن يكون تنسيق ملف TXT. وفي ما يلي مثال لملف نصي منسَّق بشكلٍ صحيح.

Advertiser: Business Name
Subject: Everything 20% Off at Business Name
Description: Buy new products at low prices!
Display Url: www.example.com
Landing Page: https://www.example.com/sale

ملاحظة: اتبع المثال بالضبط وتأكد من إدخال العناوين باللغة الإنجليزية كما هو موضّح أدناه. واحرص أيضًا على تضمين كلٍّ من الفئة (مثل "Advertiser") ومعلوماتك المحدّدة. ويوضّح الجدول أدناه عدد الأحرف المسموح به وإرشادات إضافية بشأن ما يمكن تضمينه.

العناوين عدد الأحرف المسموح به ما يمكن تضمينه
Advertiser 20 اسم شركتك أو نطاقها.
Subject 25 يمكن أن يتضمن العنوان عرضًا، أو تخفيضًا بالنسبة المئوية، أو إعلانًا مقنعًا.
Description 90 يمكن أن يتمثل الوصف في ملخص قصير أو عبارة للحث على اتخاذ إجراء.
Display URL 32 عنوان URL، كما سيظهر في إعلانك
Landing page بلا حدود عنوان URL لإعادة توجيه الجملة المحفزة ‬- يُستخدم كعنوان URL مقصود للنقرات على "عنوان URL المختصر المعروض للمُرسل" عند فتح الإعلان الموسَّع. ويمكنك إضافة عنوان URL لمتابعة أداء النقر الثابت في هذا الحقل. وهذه هي الصفحة التي سيتوجه إليها الأشخاص بعد النقر على عنوان URL المعروض.

 

كيفية إنشاء إعلانك الموسَّع

لإنشاء إعلانك الموسَّع، ستضيف ملف HTML واحدًا ومجلد صور واحدًا إلى مجلد ZIP:

  • مجلد الصور (باسم "Images") الذي يحتوي على ملفات الصور للإعلان الموسّع
  • ملف HTML‏ باسم "index.html" بالضبط

مواصفات مجلد الصور

  • يجب أن يحتوي إعلانك على صورة واحدة على الأقل، ويمكن أن يحتوي على 100 صورة على الأكثر. ولتضمين مقاطع فيديو في إعلانك الموسّع، انتقل إلى قسم الفيديو أدناه.
  • أقصى عرض للصورة: 650 بكسل
  • أقصى ارتفاع للصورة: 1000 بكسل (ملاحظة: لإنشاء الإعلانات الأكثر فعالية، نوصي بارتفاع لا يزيد عن 650 بكسل لإجمالي لوحة الإعلان الذي يشمل النص والصور بالكامل).

مواصفات ملف HTML

التفاصيل الفنية

  • عناوين URL‏: يجب أن يحتوي على عنوان URL كامل واحد على الأقل (يمكن أن يحتوي على 15 عنوانًا على الأكثر)، ويجب تشفير كل الأحرف الخاصة (على سبيل المثال، المسافات، رمز #).
  • التنسيق: تحكم في التنسيق باستخدام جداول HTML القياسية لضمان العرض المتسق عبر الأجهزة المختلفة
  • التتبع: يمكن استخدام عناوين URL لتتبّع الأداء الثابت لتتبع النقرات الخارجية. غير مسموح بوحدات بكسل التتبع لعدد مرات الظهور وعناوين URL لتتبّع الأداء الديناميكي. وإذا كنت تستخدم نموذج "إعلان HTML المخصص على Gmail" ، فتأكد من إضافة عناوين URL لتتبّع الأداء التي تريد استخدامها في ملف index.html وكذلك في ملف teaser.txt.
  • الترميز: تتوفر إمكانية استخدام HTML (استخدم ترميز UTF8) وبعض علامات HTML5 ( "ARTICLE" و"ASIDE" و"FIGCAPTION" و"FIGURE" و"FOOTER" و"HEADER" و"MARK" و"SECTION" و"TIME" و"WBR")، وبعض أنماط CSS (سمة نمط العلامات فقط، على سبيل المثال: <div style="color: black" >)

الترميز غير المسموح به

  • جافا سكريبت: ستتم إزالة علامات <script> تلقائيًا من الإعلان
  • أوراق الأنماط: ستتم إزالة علامات <link> من الإعلان تلقائيًا
  • الفلاش
  • HTML5: العلامات المعتمَدة فقط هي "ARTICLE" و"ASIDE" و"FIGCAPTION" و"FIGURE" و"FOOTER" و"HEADER" و"MARK" و"SECTION" و"TIME" و"WBR"
  • الصوت
  • إطارات iFrame
  • الصور المتحركة: ملفات GIF

أنماط CSS المعتمدة

azimuth border-right-color font-size-adjust list-style padding-bottom text-decoration-style
background border-right-style font-stretch list-style-image padding-left text-emphasis
background-attachment border-right-width font-style list-style-position padding-right text-emphasis-color
background-blend-mode border-spacing font-synthesis list-style-type padding-top text-emphasis-style
background-clip border-style font-variant margin pause text-indent
background-color border-top font-variant-alternatives margin-bottom pause-after text-justify
background-image border-top-color font-variant-caps margin-left pause-before text-kashida-space
background-origin border-top-left-radius font-variant-east-asian margin-right pitch text-orientation
background-position border-top-right-radius font-variant-ligatures margin-top pitch-range text-overflow
background-repeat border-top-style font-variant-numeric marker-offset quotes text-transform
background-size border-top-width font-weight max-height richness text-underline-position
border border-width height max-width speak unicode-bidi
border-bottom box-sizing image-orientation min-height speak-header vertical-align
border-bottom-color caption-side image-resolution min-width speak-numeral voice-family
border-bottom-left-radius clear ime-mode mix-blend-mode speak-punctuation white-space
border-bottom-right-radius color isolation object-fit speech-rate width
border-bottom-style direction layout-flow object-position stress word-break
border-bottom-width display layout-grid opacity table-layout word-spacing
border-collapse elevation layout-grid-char outline text-align word-wrap
border-color empty-cells layout-grid-char-spacing outline-color text-align-last writing-mode
border-left float layout-grid-line outline-style text-autospace zoom
border-left-color font layout-grid-mode outline-width text-combine-upright  
border-left-style font-family layout-grid-type overflow text-decoration  
border-left-width font-feature-settings letter-spacing overflow-x text-decoration-color  
border-radius font-kerning line-break overflow-y text-decoration-line  
border-right font-size line-height padding text-decoration-skip  

إضافة مقطع فيديو إلى ملف HTML لإعلانك الموسَّع

  1. كيفية إضافة مقطع فيديو

    يمكن تضمين مقطع فيديو على YouTube في إعلان بنافذة معاينة. وعندما ينقر أحد الأشخاص - ممن يستخدمون جهاز كمبيوتر - على صورة الفيديو، سيتم تشغيل مقطع الفيديو في عرض مبسط ضمن Gmail. وبعد انتهاء المستخدم من مشاهدة مقطع الفيديو، ستتم إعادته إلى إعلان Gmail الموسَّع. أما على أجهزة الجوّال، فسيتم تشغيل الفيديو على مشغّل الفيديو المعين للشخص (مثل تطبيق YouTube أو متصفّح). 

    تعليمات: لإضافة مقطع فيديو من YouTube، عليك بتشفير رابط YouTube، ومصدر الصورة، والنص المعروض بما يتناسب مع إعلانك. على سبيل المثال:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0"><img src="images/play.jpg" alt="Gmail Video"></a>

    ملاحظة: عند معاينة الإعلان في "إعلانات Google"، لن يتم عرض مقطع فيديو YouTube أو تشغيله في العرض المبسط.

  2. كيفية إضافة مقطع فيديو في علامة تبويب جديدة

    إذا كنت ترغب في تشغيل مقطع الفيديو في YouTube ضمن علامة تبويب جديدة، وليس في عرض مبسط، فعيِّن الفئة على "nonplayable" (غير قابل للعرض).

    على سبيل المثال:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Gmail Video"></a>

  3. مهم: أدرج زر "تشغيل" في صورة المعاينة.

    لكي توضّح للأشخاص أن النقر على الصورة سيؤدي إلى تشغيل مقطع فيديو، ينبغي أن تتضمن صورة المعاينة أحد أنواع زر التشغيل. لا يضيف "إعلانات Google" شيئًا إلى صور المعاينة للإشارة إلى أنها عبارة عن مقاطع فيديو.

روابط ذات صلة

هل كان ذلك مفيدًا؟
كيف يمكننا تحسينها؟

هل تحتاج إلى مزيد من المساعدة؟

تسجيل الدخول للحصول على خيارات دعم إضافية لحل مشكلتك بسرعة