ساخت پلیبل اد بدون برنامهنویس: راهنمای گامبهگام
اگر پلیبل اد را اول یک مسئله طراحی و بعد یک مسئله ساخت ببینید، میتوانید بدون نوشتن کد آن را بسازید. این هم مراحل کار، گامبهگام، و جاهایی که اشتباهات رایج پنهان میشوند.
نکات کلیدی - ساخت پلیبل اد بیشتر یک تصمیم طراحی است: پیش از دست بردن به هر ابزاری، یک مکانیک، یک هدف و یک پایان را انتخاب کنید. - چند ثانیه اول را روی کاغذ طراحی کنید. اگر یک فرد ناآشنا بدون متن نمیتواند بفهمد چه کاری باید بکند، مکانیک را سادهتر کنید. - میتوانید بدون برنامهنویس و با یک ابزار ساخت پلیبل اد یا خروجی یک موتور بصری بسازید، اما باز هم باید فایل نهایی را روی گوشیهای واقعی تست کنید. - اندکارد و دکمه استور بخشی از تبلیغاند، نه کاری که آخر سر انجام شود. پیش از هر آپلود آنها را بررسی کنید. - مشخصات فعلی هر شبکه را مرجع اصلی بستهبندی بدانید و روی همان فایلی که منتشر میکنید یک دور QA انجام دهید.
پلیبل اد در واقع چیست؟
پلیبل اد (playable ad) یک تجربه تعاملی کوچک است، معمولاً با HTML5، که داخل جایگاه تبلیغاتی اجرا میشود. کاربر برشی کوتاه از بازی یا اپ شما را میبیند، با آن تعامل میکند و سپس به یک اندکارد (end card) میرسد که او را به استور میفرستد.
این یک بیلد دمو نیست و تریلری با یک پیام «تپ کنید» هم نیست. یک حلقه تعاملی است که برای همین منظور ساخته شده تا فرد با لمس کردن، محصول شما را بفهمد. این نگاه مهم است چون نشان میدهد چه چیزی را باید حذف کنید: تقریباً همه چیز.
از نظر فنی، پلیبل یک صفحه وب است. از HTML، جاوااسکریپت، تصویر و گاهی صدا ساخته میشود و روی canvas یا DOM رندر میشود. اگر کنجکاوید زیر پوسته چه میگذرد، مستندات Canvas API در MDN منبع مقدماتی خوبی است. برای ساختن پلیبل لازم نیست آن را بخوانید، اما توضیح میدهد چرا وقتی ساده نگهش دارید، پلیبل میتواند کمحجم و سریع باشد.
گام ۱: مکانیکی را انتخاب کنید که ارزش بازی کردن دارد
بازی یا اپ خود را باز کنید و بپرسید: کدام یک اقدام باعث میشود مردم بگویند «آهان، فهمیدم»؟
- در یک بازی match-3، جابهجا کردن دو مهره و تماشای زنجیرهای از انفجارهاست.
- در یک رانر هایپرکژوال، هدایت به چپ و راست برای جا خالی دادن از موانع است.
- در یک بازی merge، کشیدن دو آیتم یکسان به سمت هم است.
- در یک اپ مالی یا تناسب اندام، میتواند یک تعامل باشد که نتیجه را نشان میدهد، مثلاً حرکت دادن یک اسلایدر و دیدن تغییر یک عدد.
مکانیکی را انتخاب کنید که بدون هیچ کلمهای راحتتر فهمیده شود و فوراً بازخورد بدهد. در برابر وسوسه نمایش پیشرفت مرحلهای، فروشگاه یا قابلیتهای اجتماعی مقاومت کنید. اینها دلیل ادامه دادناند، نه دلیل شروع کردن.
یک آزمون مفید: پلیبل را در یک جمله توصیف کنید. «بلوکهای همرنگ را بکشید تا صفحه پاک شود» جواب میدهد. «پایگاهتان را بسازید، بعد بجنگید، بعد ارتقا بدهید» جواب نمیدهد.
گام ۲: جلسه بازی را روی کاغذ طراحی کنید
پیش از ساخت، پلیبل را بهصورت دنبالهای کوتاه از بیتها (beats) بنویسید. شما در حال طراحی یک داستان بسیار کوچک هستید.
- قلاب (Hook). بازیکن در لحظه اول چه میبیند؟ باید تصویر اصلی بازی شما را نشان دهد و روشن کند که چیزی تعاملی است.
- اولین ورودی. اولین کاری که انجام میدهد چیست؟ آن را با نشانگر دست، هایلایت یا یک هدف ضرباندار هدایت کنید. به یک پاراگراف متن تکیه نکنید.
- پاداش. وقتی آن کار را انجام داد چه اتفاقی میافتد؟ حرکت، صدا (اگر شبکه اجازه میدهد) و حس روشن پیشرفت اضافه کنید.
- تشدید. یک یا دو اقدام دیگر به او بدهید که کمی بزرگتر از اولی حس شوند.
- پایان. تصمیم بگیرید چگونه تمام شود: یک برد، یک باخت با اختلاف اندک که به تلاش دوباره دعوت کند، یا قطع شدن زمانمحور. سپس اندکارد را نشان بدهید.
هر بیت را بهصورت یک فریم خام طراحی کنید. اگر نمیتوانید آن را در چند کادر بکشید، برای این فرمت بیش از حد پیچیده است.
تصمیم بگیرید چطور میشود باخت
پلیبلی که نشود در آن باخت میتواند بیمعنی به نظر برسد، و پلیبلی که خیلی زود میبازید ناعادلانه حس میشود. الگوی رایج این است که یک برد هدایتشده داشته باشید و بعد یک مرحله دشوارتر که باخت در آن ممکن اما بخشنده است. تلاش دوباره باید فوری باشد.
گام ۳: انتخاب کنید چطور بسازید
بدون یک توسعهدهنده اختصاصی، سه مسیر واقعبینانه دارید.
مسیر الف: ابزار ساخت پلیبل اد
یک ابزار ساخت پلیبل اد، HTML5 را از ورودیهای شما برایتان تولید میکند. برای مثال PlayableRun از صفحه اپ شما در App Store یا Google Play شروع میکند و پلیبلی میسازد که میتوانید آن را بهبود بدهید، سپس یک ZIP آماده برای Google Ads خروجی میدهد. این مسیر برای تیمهای کوچکی مناسب است که میخواهند بدون ساختن یک پایپلاین، نسخههای مختلف را منتشر کنند.
بدهبستان آن میزان کنترل است. شما در چارچوب قالبها و تعاملهای موجود کار میکنید، پس مکانیک گام ۱ را با در نظر گرفتن این موضوع انتخاب کنید.
مسیر ب: خروجی پلیبل از موتور بازی
اگر بازی شما با موتوری ساخته شده که خروجی پلیبل یا HTML5 دارد، یک طراح فنی اغلب میتواند بازی را به یک مرحله تقلیل بدهد و خروجی بگیرد. این کار تصاویر و حس واقعی بازی شما را حفظ میکند، اما باید حجم فایل و پوششهای (wrapper) مخصوص هر شبکه را خودتان مدیریت کنید.
مسیر ج: فریلنسر یا استودیو
اگر به مکانیک منحصربهفردی نیاز دارید که هیچ ابزاری پشتیبانی نمیکند، برونسپاری منطقی است. اسکریپت گام ۲ را به آنها بدهید، نه یک بریف مبهم. بپرسید فایل تحویلی شامل چیست و لینک استور را چگونه مدیریت میکند.
هر مسیری را انتخاب کنید، اسکریپت و داراییها کار خود شماست. هیچ ابزاری نمیتواند تصمیم بگیرد بازی شما چه چیزش سرگرمکننده است.
گام ۴: داراییها را آماده کنید و بسازید
پیش از شروع ساخت، آنچه پلیبل لازم دارد را جمع کنید:
- آرت اصلی. شخصیتها، آیتمها، پسزمینهها و اجزای رابط کاربری، با خروجی تمیز و در صورت نیاز با پسزمینه شفاف.
- عناصر بازخورد. ذرات، پاپ امتیاز، هایلایتها و نشانگر دست.
- صدا. اختیاری است، و یک پلیبل خوب باید با صدای خاموش هم مفهوم باشد.
- اندکارد. آیکون شما، یک خط کوتاه متن و یک دکمه نصب واضح.
- لینک استور. دقیقاً همان صفحه App Store یا Google Play که تبلیغ باید باز کند.
هنگام ساخت، سه اصل را در نظر داشته باشید.
لمس را بخشنده کنید. مردم روی صفحههای کوچک و با انگشتهای نادقیق بازی میکنند. نواحی لمس بزرگ و رفتار کشیدن بخشنده بر کنترلهای دقیق برتری دارند. اگر ورودی سفارشی میسازید، مستندات Pointer Events در MDN توضیح میدهد چطور یک مسیر کد میتواند هم لمس و هم ماوس را مدیریت کند.
فوراً واکنش نشان دهید. هر تپ باید واکنش قابلمشاهدهای ایجاد کند. حتی کمی تأخیر باعث میشود تبلیغ خراب به نظر برسد و مردم آن را ترک کنند.
سبک نگهش دارید. داراییهای سنگین لود را کند میکنند و پلیبلی که کند لود شود، پیش از آنکه کسی آن را ببیند مخاطب را از دست میدهد. تصاویر را فشرده کنید، از صدای غیرضروری بپرهیزید و هر قابلیتی را که در اسکریپت شما نیست حذف کنید. هر شبکه محدودیت حجم خودش را دارد، پس به جای تکیه بر حافظه، مشخصات فعلی شبکه هدف را بررسی کنید.
گام ۵: روی دستگاههای واقعی تست کنید
پیشنمایش دسکتاپ مشکلات را پنهان میکند. پیش از آپلود، فایل را روی دستکم چند گوشی واقعی باز کنید، ترجیحاً یک گوشی قدیمیتر و یک گوشی جدیدتر، و موارد زیر را بررسی کنید.
- آیا روی اتصال موبایل سریع لود میشود؟
- آیا ورودی لمسی مثل پیشنمایش شما رفتار میکند؟
- آیا چیدمان در هر دو حالت عمودی و افقی، اگر شبکه از هر دو پشتیبانی میکند، درست جا میشود؟
- آیا اندکارد هر بار ظاهر میشود، از جمله بعد از باخت یا اتمام زمان؟
- آیا دکمه نصب صفحه درست استور را باز میکند، نه یک جایگزین موقت؟
- اگر بازیکن بهصورت تصادفی، سریع تپ کند یا اصلاً کاری نکند، چیزی خراب میشود؟
سؤال آخر موارد زیادی را شکار میکند. آدمهای واقعی از اسکریپت شما پیروی نمیکنند. وسط انیمیشنها تپ میکنند، نشانگر دست را نادیده میگیرند و سعی میکنند اسکرول کنند. پلیبل شما باید از پس اینها برآید.
برای فهرستی کاملتر، پیش از هر انتشار از چکلیست QA پلیبل HTML5 استفاده کنید.
گام ۶: خروجی بگیرید و آپلود کنید
بستهبندی جایی است که پلیبلهای خوب هم رد میشوند. شبکهها در نحوه فعال شدن لینک استور، فایلهای مجاز و شکل بسته تفاوت دارند.
برای Google Ads بهطور خاص، جزئیات ساختار ZIP و بررسیهای سیاستی در نحوه آپلود ZIP با HTML5 در Google Ads آمده است. اگر کمپینهای اپ (App campaigns) اجرا میکنید، ExitApi در کمپینهای اپ را بخوانید تا بفهمید کلیکاوت باید چطور متصل شود.
بررسی نهایی را روی همان فایلی انجام دهید که میخواهید آپلود کنید، نه روی یک بیلد قبلی. بهطرز شگفتآوری رایج است که یک نسخه را تست و نسخه دیگری را منتشر کنند.
اشتباهات رایجی که باید از آنها دوری کنید
- نمایش بیش از حد. پلیبل آموزش نیست. اگر به توضیح طولانی نیاز دارد، مکانیک را کوچکتر کنید.
- گیمپلی جعلی. اگر پلیبل هیچ شباهتی به محصول واقعی ندارد، مردم احساس میکنند گمراه شدهاند و بعضی بلافاصله آن را حذف میکنند. چیزی را نشان بدهید که واقعاً ارائه میکنید.
- پنهان کردن فراخوان به اقدام (CTA). اندکارد باید آشکار باشد. مردم را مجبور نکنید دنبال دکمه بگردند.
- نادیده گرفتن حالت باخت. برد از پیش نوشتهشده کسلکننده است. یک شانس کوچک برای باخت و پس از آن یک تلاش دوباره آسان، معمولاً توجه را نگه میدارد.
- تست فقط در مرورگر. دستگاههای واقعی مشکلات لمس، صدا و چیدمان را آشکار میکنند که دسکتاپ هرگز نشان نمیدهد.
- انتشار فقط یک نسخه. وقتی نخستین پلیبل کار کرد، هر بار فقط یک چیز را تغییر بدهید، مثل قلاب، اولین ورودی یا اندکارد، تا بفهمید چه چیزی مهم است.
یک پروژه اول واقعبینانه
اگر این اولین پلیبل شماست، دامنه را کوچک نگه دارید. یک مکانیک انتخاب کنید، یک مرحله از آن را بسازید، یک اندکارد واضح اضافه کنید، روی چند گوشی تست کنید و روی یک شبکه آپلودش کنید. از یک کمپین واقعی بیشتر یاد میگیرید تا از برنامهریزی برای مجموعهای کامل از نسخهها.
وقتی آمادهاید امتحان کنید، میتوانید نمونهها را در صفحه دموهای PlayableRun ببینید تا بدانید یک پلیبل تکمیلشده چه شکلی است، یا یک حساب رایگان بسازید و اولین پلیبل خود را از روی صفحه استور خودتان بسازید.
پرسشهای متداول
›آیا میتوانم بدون کدنویسی پلیبل اد بسازم؟
بله. بخش سخت کار تصمیمگیری درباره این است که بازیکن چه کاری انجام میدهد و تبلیغ چطور تمام میشود، نه نوشتن کد. یک ابزار ساخت پلیبل اد میتواند بستهبندی و خروجی HTML5 را انجام دهد و شما مکانیک، داراییهای گرافیکی و فراخوان به اقدام (CTA) را فراهم میکنید.
›یک پلیبل اد باید چه چیزهایی داشته باشد؟
یک مکانیک ساده که از محصول واقعی شما گرفته شده باشد، بازخورد روشن برای هر تپ، مسیری کوتاه تا یک برد یا یک باخت با اختلاف اندک، و یک اندکارد (end card) با دکمه استور. هر چیز بیشتر از این معمولاً کاربر را کند میکند.
›آیا برای هر شبکه تبلیغاتی به بیلد جداگانه نیاز دارم؟
اغلب بله، دستکم در بستهبندی. شبکهها در نحوهای که انتظار دارند لینک استور فعال شود و در فایلهایی که میپذیرند تفاوت دارند. پیش از خروجی گرفتن، مشخصات فعلی هر شبکه را بررسی کنید و همان فایلی را که قصد آپلودش دارید تست کنید.
›چطور پلیبل اد را پیش از لانچ تست کنم؟
فایل خروجی را روی گوشیهای واقعی باز کنید، نه فقط در مرورگر دسکتاپ. ورودی لمسی، زمان لود، اندکارد و این را بررسی کنید که دکمه استور صفحه درست را باز میکند. سپس آن را با ابزار پیشنمایش یا اعتبارسنجی خود شبکه اجرا کنید.
›آیا پلیبل باید کل بازی باشد؟
خیر. باید یک برش کوچک و صادقانه از تجربه باشد که فرد تازهوارد بدون راهنما بفهمد. اگر بازیکن به آموزش نیاز دارد، آن برش بیش از حد بزرگ است.
منابع
صفحه اپاستور خود را به یک پلییبل تبدیل کنید
لینک App Store یا Google Play را جایگذاری کنید و در چند دقیقه یک پلییبل HTML5 قابل تست دریافت کنید. اولین نمونه رایگان است.
بیشتر بخوانید
- Playable ads
تبلیغ پلیable چیست؟ راهنمای ساده و کاربردی
7 دقیقه مطالعه
- Google Ads HTML5
clickTag for Display HTML5 — PlayableRun checklist
1 دقیقه مطالعه
- Google Ads HTML5
ExitApi in App campaigns — what PlayableRun generates
1 دقیقه مطالعه