أفضل الممارسات لإنشاء إعلان قصة ويب

Important: this documentation is not applicable to your currently selected format websites!

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

مبادئ إعلانات قصص الويب

لا تتكامل أشكال الإعلانات الحالية، مثل الشعارات والمربعات، بشكل جيد مع تنسيق قصص الويب. كما الإعلانات الكلاسيكية بطيئة ومتقطعة وتشعر بأنها في غير مكانها في تجربة القصة.

تتوافق إعلانات قصة الويب مع المبادئ التالية:

إعلانات AMPHTML الصالحة: تتبع التصنيف الفني نفسه كالإعلانات التقليدية AMPHTML ad.
المرئيات أولًا: حالة دعوة جذابة وظاهرة ومدفوعة بالسياق.
أصلية: تحتوي صفحة الإعلان على الأبعاد نفسها مثل صفحة القصة الأصلية.
نموذج التفاعل نفسه: يمكن للمستخدم المتابعة إلى الشاشة التالية تمامًا كما يفعل مع صفحة القصة الأصلية.
سريعة: لا يظهر الإعلان للمستخدم في حالة نصف محملة أبدًا.

لتحقيق الاتساق مع هذه المبادئ، يحدد وقت تشغيل قصة الويب الموضع المناسب لصفحة إعلان وسط قصة ويب، اقرأ المزيد حول آليات موضع الإعلان في الإعلان في قصص الويب.

نموذج إعلان قصة ويب

تعد إعلانات قصة الويب إعلانات AMPHTML، ولكنها تتطلب بيانات علامة وصفية وتفي بمواصفات التخطيط المحددة وعناصر واجهة المستخدم المطلوبة. وسيتضمن إعلان قصة الويب دائمًا زر دعوة إلى اتخاذ إجراء وتسمية إعلان معروضة كإخلاء نصي أعلى الصفحة.

للحفاظ على اتساق تجربة المستخدم، تقع مسؤولية عرض تسمية الإعلان وزر الدعوة لاتخاذ إجراء على عاتق وقت تشعيل قصة الويب.

مهم– يكون زر الدعوة لاتخاذ إجراء وحده هو القابل للنقر فوقه في إعلان قصة ويب، لذا تذكر هذا الأمر دائمًا عند تطوير تصميمك.

بيانات العلامة الوصفية

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

<html amp4ads>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <!-- Specifies where the user is directed -->
    <meta name="amp-cta-url" content="%%CLICK_URL_UNESC%%%%DEST_URL%%">

    <!-- Specifies the call to action button text enum -->
    <meta name="amp-cta-type" content="EXPLORE">

    <!-- Specifies what type of landing page the user is direct to -->
    <meta name="amp-cta-landing-page-type" content="NONAMP">

    <style amp4ads-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
     amp-img {height: 100vh}
    </style>
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

  </head>
  <body>
    <amp-img src=%%FILE:JPG1%% layout="responsive" height="1280" width="720"></amp-img>
  </body>
</html>

يوصى باختيار علامة amp-cta-type tag من خيارات نص زر الدعوة لاتخاذ إجراء المتوفرة. وستقوم AMP تلقائيًا بتوطين الخيارات المحددة مسبقًا عند الاقتضاء.

وكما أنه يُسمَح بالنص المخصص، لكن ستحتاج إلى تنفيذ عملية التوطين الخاصة بك.

تعداد نص زر الدعوة إلى اتخاذ إجراء

يمكن تكوين زر الدعوة لاتخاذ إجراء من مجموعة محددة مسبقًا من الخيارات:

APPLY_NOW: "تطبيق الآن"
BOOK_NOW: "حجز"
BUY_TICKETS: "شراء تذاكر"
DOWNLOAD: "تنزيل"
EXPLORE: "استكشف الآن"
GET_NOW: "احصل عليه الآن"
INSTALL: "تثبيت الآن"
LISTEN: "الاستماع الآن"
MORE: "المزيد"
OPEN_APP: "فتح التطبيق"
ORDER_NOW: "طلب الآن"
PLAY: "تشغيل"
READ: "القراءة الآن"
SHOP: "التسوق الآن"
SHOWTIMES: "أوقات العرض"
SIGN_UP: "تسجيل"
SUBSCRIBE: "الاشتراك الآن"
USE_APP: "استخدام التطبيق"
VIEW: "عرض"
WATCH: "مشاهدة"
WATCH_EPISODE: "مشاهدة الحلقة"

ملحوظة– إن الروابط العميقة التي ستظهر ليست مدعومة، لكن الروابط إلى صفحات App Store أو Google Play مدعومة باستخدام http/https. إذ يتم تحديد تعداد نص زر الدعوة لاتخاذ إجراء في التحميل الأساسي لاستجابة الإعلان.

إذا احتجت إلى الدعم لتعداد نص زر الدعوة لاتخاذ إجراء جديد، يرجى فتح مشكلات GitHub .

صفحة هبوط الإعلانات

يمكنك تحديد أحد الخيارات الثلاثة لصفحة هبوط إعلان قصة الويب.

STORY: صفحة الهبوط عبارة عن قصة لها رعاية.
AMP: صفحة الهبوط عبارة عن صفحة AMP صالحة.
NONAMP: أي نوع آخر من صفحات الويب.

التخطيط

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

أبعاد التراكب

يتراكب تصنيف الإعلان على شريط متدرج داكن عبر عرض الإعلان بالكامل ويمتد من الأعلى إلى 46 بكسل لأسفل.

يقع زر الدعوة لاتخاذ إجراء في 32 بكسل من الأسفل ويتم توسيطه أفقيًا، وهو 120 بكسل × 36 بكسل.

يقع زر الدعوة لاتخاذ إجراء بالقرب من الجزء السفلي

الصور ومقاطع الفيديو

يجب أن تكون الصور ومقاطع الفيديو المضمنة في إعلان قصة AMP بملء الشاشة القياسي 4: 3. ويجب أن تستخدم الإعلانات التي تتضمن فيديو ملصق الأبعاد الموصى بها لصورة الملصق وهي 720 بكسل (720 عرض × 1280 ارتفاع).

<amp-video controls
  width="720"
  height="1280"
  layout="responsive"
  poster="images/kitten-playing.png">

  <source src="videos/kitten-playing.webm"
    type="video/webm" />
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

الصورة

يمكن تحجيم صور الخلفية إلى ملء الشاشة. ويعد CSS التالي طريقة ناجحة لاقتصاص مقاطع الفيديو والصور وتوسيطها.

<style amp-custom>
    amp-img, amp-video {
        height: 100vh;
    }
    amp-video video {
        object-fit: cover;
    }
    amp-img img{
        object-fit: cover;
    }
</style>

مقطع الفيديو

حدد `<source>` مقابل `src`

عند تحديد المصدر لـ amp-video

مثال: تحديد ملفات مصدر متعددة

<amp-video id="video-page1" autoplay loop
  layout="fill" poster="https://example.com/media/poster.jpg">

  <source src="https://amp-example.com/media/movie.m3u8"
    type="application/vnd.apple.mpegurl" />
  <source src="https://amp-example.com/media/movie.mp4"
    type="video/mp4" />
</amp-video>

حجم الفيديو ومدته

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

تنسيقات الفيديو

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

ملحوظة– إن تنسيق الفيديو HLS غير مدعوم في متصفح Chrome لسطح المكتب (ولا حتى من خلال المحاكاة)، لذا فإن تحديد تنسيق احتياطي MP4 مطلوب لأي زيارات سطح مكتب إلى صفحتك. ولتصحيح أخطاء مقاطع فيديو HLS، ستحتاج إلى استخدام جهاز محمول فعلي عبر تصحيح أخطاء USB.

دقة الفيديو

Web Story videos are always vertical (i.e., portrait view), with an expected aspect ratio of 16:9. Use the recommended resolution for the video streaming type:

نوع دفق الفيديو	الدقة
غير قابل للتكيف	720 x 1280 بكسل
قابل للتكيف	720 x 1280 بكسل 540 x 960 بكسل 360 x 480 بكسل

ملحوظة– بالنسبة للأجهزة المحمولة التي تختلف عن نسبة العرض إلى الارتفاع 16:9، قد يتم اقتصاص الفيديو أفقيًا أو رأسيًا لملاءمة إطار العرض.

ترميز الفيديو

لتنسيق MP4، استخدم H.264.
لتنسيق WEBM، استخدم VP9.
لتنسيق HLS أو DASH، استخدم H.264.

جودة الفيديو

تخصيص تحويل الشفرة

هناك العديد من الأدوات التي يمكنك استخدامها لترميز مقاطع الفيديو وضبط جودة الفيديو أثناء الترميز. إليك عدد قليل منها:

الأداة	الملحوظات
FFmpeg	التخصيصات الموصى بها: لتنسيق MP4، استخدم `-crf 23`. لتنسيق WEBM، استخدم `-b:v 1M`.
avconv	التخصيصات الموصى بها: لتنسيقMP4، استخدم `-crf 23`. لتنسيقWEBM، استخدم `-b:v 1M`.
Shaka Packager	برنامج تشفير يمكنه أيضًا إخراج تنسيق HLS بما في ذلك قائمة التشغيل.

حجم مقطع فيديو HLS

تأكد من أن حجم مقاطع HLS الخاصة بك لا تزيد مدتها عن 10 ثوانٍ.

حيوية

ثمة بعض المحاذير للرسوم المتحركة في القصص، مثل مفهوم ما هو "مرئي". على سبيل المثال: في عرض سطح المكتب الخاص بـ "3 panel"، قد يكون تصميمك مرئيًا على الصفحة ولكن ليس التركيز المركزي بعد. ويمكن أن يمثل هذا الأمر مشكلة إذا كان التأثير المطلوب هو بدء الرسوم المتحركة عندما تصبح الصفحة نقطة التركيز الرئيسية.

للمساعدة في ذلك، ستضيف AMP سمة خاصة amp-story-visible إلى النص الأساسي للمواد الإبداعية عندما تكون هي نقطة البؤرة في كل سياقات العرض، ومن المستحسن إطلاق رسوم متحركة بناءً على هذه الإشارة.

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

<style amp-custom>
    body[amp-story-visible] .my-animation-class {
      animation: 2s my-animation-name;
    }
</style>

قصة لها رعاية

تكون القصة التي لها رعاية موجودة كعنوان URL على الويب، مما يتيح توجيه حركة مرور المستخدم إلى قصة لها رعاية من زر الدعوة لاتخاذ إجراء في إعلان قصة AMP، إذ إن القصة التي لها رعاية عبارة عن قصة AMP، لكن مع التركيز على تجربة إعلانية غامرة وواسعة.

اقرأ المزيد حول إنشاء قصة ويب من هنا.