23 مكونًا من مكونات AMP قد لا تعرف أنه يمكنك إضافتها إلى صفحات AMP

ما يلمع ليس ذهبًا دائمًا ... أم هو كذلك؟

تم إنشاء AMP لجعل ويب الجوّال أسرع ، ولكن للقيام بذلك ، تم فرض قيود - مثل القيود المتعلقة بالبرمجة المخصصة و HTML / CSS وجافا سكريبت. يعد حد ورقة أنماط CSS البالغ 75 كيلوبايت دليلًا على ذلك لأن أي صفحة ويب تتجاوز ذلك ستفشل في التحقق من صحة AMP.

حتى مع قيودها ، يمكن للمسوقين الرقميين تخصيص الصفحات باستخدام العديد من مكونات AMP. تعمل علامات HTML المتخصصة هذه بشكل مشابه لعلامات HTML التقليدية (مع علامات الفتح والإغلاق ، والسمات ، وبعض إمكانيات تصميم CSS) ويمكن التعرف عليها بسهولة ، وتبدأ دائمًا بالبادئة amp.

من المحتمل أن تتم إضافة القائمة الكاملة بشكل مستمر ، ولكن مكونات AMP الـ 23 التالية تمنحك فكرة جيدة عن كيفية تخصيص صفحات AMP.

(يوفر Instapage الآن رمز AMP المخصص لتمكين مجموعة متنوعة من المكونات. انتقل هنا للحصول على التفاصيل الكاملة.)

23 مكونًا من مكونات AMP لتخصيص صفحاتك

1. الأكورديون

توفر إضافة amp-accordion إلى صفحتك مخططًا تفصيليًا للمحتوى وتسمح للزوار بالانتقال إلى قسم معين من الصفحة. يُعتبر كل من "الأطفال" الفوريين لـ AMP أكورديون قسمًا في الأكورديون (يجب أن يحتوي كل قسم على اثنين فقط من "العناصر الفرعية" المباشرة) ، ويعتبر العنصر الفرعي الأول من القسم عنوان القسم. سيؤدي النقر فوق العنوان إلى توسيع القسم أو تصغيره:

هناك خياران إضافيان لمكون AMP أكورديون هما الأكورديونات المتداخلة (لتداخل أو تكديس الأكورديونات المتعددة داخل بعضها البعض) والأكورديونات القابلة للطي تلقائيًا (والتي تسمح فقط بقسم موسع واحد في كل مرة).

2. الصوت

بدلاً من علامة HTML5 الصوتية التقليدية ، تستخدم AMP نسختها الخاصة: amp-audio. لا يمكن استخدام مكوِّن صوت AMP إلا لتضمينات ملفات الصوت بتنسيق HTML5 المباشرة ، والتي تظهر في الصفحة على النحو التالي:

على الرغم من أن عناصر التحكم في الصوت الموضحة أعلاه (التشغيل / الإيقاف المؤقت والصوت / كتم الصوت والتنزيل) يتم إضافتها افتراضيًا ، يمكن تعطيل زر التنزيل الموجود على اليمين:

3. تتبع المكالمات

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

4. دائري

يعرض مكوِّن AMP الدائري صورًا متعددة بطول محور أفقي ، مع العديد من تنسيقات amp-carousel المختلفة للاختيار من بينها.

يمكنك استخدام type = "carousel" لعرض قائمة بالصور كشريط متصل:

أو اكتب = "شرائح" لعرض قائمة بالصور على هيئة شرائح:

يمكنك أيضًا اختيار سمة التشغيل التلقائي (النوع = الشرائح فقط) والتي يتم تمريرها تلقائيًا عبر الشرائح في فواصل زمنية مدتها 5 ثوانٍ دون تدخل المستخدم.

5. الفيسبوك

يدمج مكون AMP Facebook منشورات Facebook والصور ومقاطع الفيديو في صفحات AMP ، ولا يتطلب سوى عنوان URL الخاص بـ Facebook.

6. تعليقات الفيسبوك

تسمح تعليقات AMP-facebook بتضمين تعليقات Facebook في صفحات AMP.

7. الفيسبوك مثل

يسمح AMP-facebook-like بتضمين زر Facebook like في صفحات AMP.

8. صفحة الفيسبوك

تقوم صفحة AMP-facebook بتضمين صفحة Facebook في ملفات AMP ، ولا تتطلب سوى href لصفحة Facebook. يسمح لك مكون صفحة AMP Facebook بإظهار علامات تبويب مختلفة على صفحة Facebook. على سبيل المثال ، يمكنك عرض الجدول الزمني وعلامة تبويب الأحداث من خلال تحديد علامات تبويب البيانات = "المخطط الزمني ، الأحداث:"

9. الخط

يتيح لك مكون خط AMP تصميم صفحاتك بخطوط مخصصة في نص المستند أو رأسه:

الخط المختار غير مدعوم ، يتم عرضه كنص أحمر عادي:

10. النموذج

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

11. جيو

يسمح الامتداد الجغرافي لصفحات AMP بأقسام صغيرة من المحتوى بناءً على تقدير تقريبي لموقع المستخدم (على مستوى الدولة فقط ، على غرار مستوى رمز البلد ISO). كما يوفر خيارًا لتجميع مواقع مختلفة معًا ، مما يسهل تطبيق السمات على عدة مناطق جغرافية في وقت واحد.

12. iFrame

يقوم AMP-iframe بتضمين المحتوى في صفحات AMP عبر iFrame ، وهو مثالي لعرض المحتوى غير المدعوم من AMP (Vimeo و Giphy وخرائط Google وما إلى ذلك).

يسمح AMP-iframe بتغيير حجم iFrame في وقت التشغيل - إما عند تحميل الصفحة (سيتم تغيير حجم iFrame المضمن إلى 200 × 200 بكسل) أو عند تفاعل المستخدم (سيؤدي الضغط على الزر إلى تغيير حجم iFrame إلى 300 × 300 بكسل). القيد الوحيد مع مكون AMP هذا هو أنه يجب أن يكون إما 600 بكسل بعيدًا عن الجزء العلوي ، أو ليس ضمن أول 75٪ من إطار العرض عند التمرير إلى الأعلى - أيهما أصغر.

13. صورة مبسطة

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

14. انستغرام

يمكن تضمين مقاطع فيديو وصور Instagram في صفحات AMP الخاصة بك باستخدام amp-instagram ، باستخدام رمز البيانات القصير الموجود في كل عنوان URL للصور / الفيديو. يمكنك أيضًا تضمين تسميات توضيحية مع سمة البيانات التوضيحية:

15. معرض Lightbox

يوفر AMP-lightbox-gallery تجربة "العرض المبسط" لمكونات AMP الأخرى ، مثل amp-img و amp-carousel (الصور فقط مدعومة حاليًا). عندما يتفاعل الزائر مع عنصر AMP ، يتم توسيع مكون واجهة المستخدم لملء إطار العرض حتى يغلقه مرة أخرى. إذا كانت صفحتك تحتوي على عناصر متعددة ، فما عليك سوى إضافة سمة العرض المبسط إلى كل صورة تريد أن يعرضها المستخدمون في العرض المبسط.

16. بينتيريست

باستخدام amp-pinterest ، تتيح إضافة زر "Pin it" إلى صفحتك للزوار تثبيت محتوى متنوع من موقعك:

لإضافة زر "Pin it" ، ستحتاج إلى هذه السمات:

• عنوان url للبيانات: عنوان URL المراد مشاركته
• وسائط البيانات: عنوان URL للصورة المراد تثبيتها
• وصف البيانات: الوصف الافتراضي الذي يظهر في الدبوس

أو يمكنك تضمين أداة Pin كاملة:

في هذه الحالة ، يجب أن تحتوي سمة عنوان url للبيانات على عنوان URL المؤهل بالكامل لمورد Pinterest.

17. بكسل

يعد مكوِّن بكسل AMP طريقة سريعة لتتبع مشاهدات الصفحة. AMP-pixel هو مكون مدمج لا يتطلب تحميل امتداد.

18. رديت

يمكن تضمين كل من منشورات وتعليقات Reddit في صفحات AMP باستخدام amp-reddit. يتطلب مكوِّن AMP Reddit أن تحدد بين المنشور أو التعليق ومصدر التضمين. عند تضمين التعليقات ، قم بتضمين التعليق الأصلي عن طريق تحديد data-embedparent = ”true“ ، وقم بتضمين التعليقات المحدثة من خلال تحديد data-embedlive = ”true.

19. SoundCloud

يمكن للزوار تشغيل مسارات SoundCloud على صفحات AMP الخاصة بك عند استخدام مكون AMP SoundCloud (كل ما تحتاجه لـ amp-soundcloud هو المسار الموجود في كود تضمين SoundCloud):

يمكنك حتى تضمين قائمة تشغيل SoundCloud كاملة مع قائمة التشغيل (موجودة أيضًا في كود تضمين SoundCloud) ، عن طريق استبدال data-trackid بـ data-playlistid:

20. تويتر

على غرار مكونات AMP الأخرى لوسائل التواصل الاجتماعي ، يقوم amp-twitter بتضمين التغريدات في صفحات AMP الخاصة بك:

إذا لم تكن الصورة ضرورية ، أو كنت تحاول توفير مساحة على صفحتك ، فيمكنك اختيار إلغاء تنشيط بطاقات Twitter باستخدام data-Cards = "hidden:"

21. زر المفضلة

يسمح إطار عمل AMP للمسوقين بإضافة زر مفضل / إعجاب / إشارة مرجعية. كما يقدم إصدارًا أكثر تعقيدًا يتضمن عددًا مفضلاً ، ويقوم بتحديث هذا الرقم عند النقر فوق الزر:

22. المدفوعات في AMP

يمكن أن تدعم صفحات AMP طلب معلومات الدفع مباشرة من المتصفح. لطلب المدفوعات في AMP ، ستحتاج أيضًا إلى amp-iframe. في ما يلي إطار iFrame مضمن به زر "اشترِ الآن" ، مع كل منطق الدفع الفعلي المضمن في iframe src نفسها:

ومع ذلك ، نظرًا لأن AMP يقيد JavaScript ، يجب أن يتعامل مصدر iFrame أيضًا مع الحالات التي لا يتوفر فيها PaymentRequest. تشمل الخيارات الأخرى:

• تبديل زر "اشترِ الآن" بزر "إضافة إلى عربة التسوق"
• إعادة توجيه المستخدمين إلى نموذج الخروج القياسي

23. تصنيف النجوم

يمكن إضافة إمكانات التصنيف بالنجوم إلى صفحات AMP الخاصة بك ، مع ميزات تشمل إمكانية الوصول إلى اللمس والماوس ولوحة المفاتيح ونجوم متغيرة الألوان عندما يحوم المستخدم فوقها:

ما مكونات AMP التي ستضيفها إلى صفحتك؟

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

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