شرایط و مشخصات فنی Native Ad در زومیت

در تبلیغات Native Ad محتوای مد نظر مشتری در قالب مشابه سایت از نظر ظاهر و عملکرد به نمایش در می‌آید. این نوع از تبلیغات که به‌شدت درگیرکننده و پربازده است یکی از روش‌های تاثیر گذار برای نمایش محتوای مجلات و فروشگاه‌ها به شمار می‌رود.

نکته مهم: از آنجایی که این نوع از تبلیغات قرار است کاملا شبیه به دیگر کامپونت‌های زومیت به نظر برسد مشتری اجازه ندارد از استانداردهای ظاهری زومیت برای فونت، سایز فونت، رنگ متون و غیره خارج شود. 

دستور العمل‌های الزامی

  • تصویر تبلیغات Native باید با محتوایی تیتر و لندینگ پیچ متصل به آن مرتبط باشد
  • نباید هیچ‌گونه نوشته‌‌ای روی تصویر وجود داشته باشد
  • تیتر هر کدام از عناوین نباید بیش از ۶۲ کارکتر (همراه اسپیس) باشد
  • تصاویر نباید هیچ‌گونه کادر (border) یا قاب داشته باشند 
  • اسپانسر حق ندارد هیچ کد css‌ای را در کد خود اضافه کند و تمام cssها توسط خود زومیت مدیریت خواهد شد.

مدت پردازش

زومیت برای قرار گیری تبلیغات Native حداقل پنج روز کاری زمان نیاز دارد. این امکان وجود دارد که پس از بررسی تیم فنی، تبلیغات نیتو مشتری به نمایش در نیاد و از مشتری خواسته شود تا تغییرات لازم را روی کد و خروجی HTML اعمال کند. 

مشخصات فنی تبلیغات Native در زومیت

  • نام برند: در قسمت بالای بخش تبلیغات Native برند مشتری با این شکل به نمایش در می‌آید:
    • سایز فونت 11px
    • سایز لوگوی اسپانسر 20x20px
    • فاصله خط و لوگوی اسپانسر تا اول ردیف 0 و ارتفاع این خط نیز 1.2em
line-height: 1.2em;
padding: 0px;
  • عبارت مربوط به اسپانسر می‌تواند لینک داشته باشد، اما نباید استایل Mouse Hover روی آن مخالف استاندارد سایت باشد. یعنی پس از هاور کردن ماوس روی این عبارت نباید عبارت تغییر کرده یا سایز و فونت و رنگ آن عوض شود:
display:inline;
color:#959595;
font-weight:300;
font-size:12.0px;
  • تصویر: ‌سایز تصویر بندانگشتی باید ۲۰۴ در ۱۳۶ پیکسل باشد 
  • پدینگ بین هر ستون با دیگری باید ۳۵ پیکسل و پدینگ هر ردیف ۳۰ پیکسل باشد
  • تیتر:‌ سایز فونت تیتر هر مطلب باید ۱۳ پیکسل، رنگ تیتر #444 و ارتفاع خطوط نیز ۲۵ پیکسل باشد:
Font-size: 13px;
Line-height: 25px;
Font-weight: 400;
color: #444;

ردیف سوم: ردیف سوم تبلیغات نیتیو می‌تواند در دو سایز متفاوت باشد سایز ۲۰۴ در ۱۳۶ مانند ردیف‌های اول و دوم یا سایز ۲۰۴ در ۲۶۰ بصورت عمودی. 

خروجی کد: کد امبد شده در سایت زومیت باید عینا به شکل زیر باشد و هیچ‌کد CSS نیز به آن نباید اضافه شود. استایل حتی بصورت این‌لاین نیز نباید به کد اضافه شود. 

مطالب عادی

Native-ad_-_Standard

کد برای نمایش مطالب عادی:

<div class="nt_wrapper nt_wrapper-InsidebarPage">
<div class="row"> <div class="col-xs-12"> <span class="pull-left logo-container"> مطالب تبلیغاتی از نام‌مشتری <img src="/favicon.ico" /> </span> </div> </div> <div class="row"> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x136"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x136"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x136"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x136"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x136"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x136"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> </div>
</div>

مطالب عادی حالت دوم

Native-ad_-_Standard_2nd_Style

کد برای نمایش مطالب عادی حالت دوم:


<div class="row"> <div class="col-xs-12"> <span class="pull-left logo-container"> مطالب تبلیغاتی از نام‌مشتری <!--Sponsor Logo in 20x20px--> <img src="/favicon.ico" /> </span> </div> </div> <div class="row"> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x260"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <div class="col-inner"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x260"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x260"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x260"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x260"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/204x260"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> </div>

مطالب عریض:

Native Ad: Native-ad_-_Full-Width

کد نمایش برای مطالب عریض:

<div class="class="container nt_wrapper">
<div class="row"> <div class="col-xs-12"> <span class="pull-left logo-container"> مطالب تبلیغاتی از نام‌مشتری <!--Sponsor Logo in 20x20px--> <img src="/favicon.ico" /> </span> </div> </div> <div class="row"> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x150"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x150"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x150"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x150"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x150"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x150"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x150"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x150"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x150"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> <div class="col"> <a href="#"> <picture> <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x150"> <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;"> </picture> </a> <div class="nt_type1_content"> <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a> </div> </div> </div> <div class="row"> </div>
</div>

مطالب عریض - حالت دوم:

Native-ad_-_Full-Width_2nd_style.jpg

کد نمایش در مطالب عریض حالت دوم:

<div class="row">
                                <div class="col-xs-12">
                                    <span class="pull-left logo-container">
                                        مطالب تبلیغاتی از نام‌مشتری
										<!--Sponsor Logo in 20x20px-->
                                        <img src="/favicon.ico" />
                                    </span>
                                </div>
                            </div>
                            <div class="row">

                                <div class="col">
                                    <div class="col-inner">
                                        <a href="#">
                                            <picture>
                                                <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x286">
                                                <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;">
                                            </picture>
                                        </a>
                                        <div class="nt_type1_content">
                                            <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <a href="#">
                                        <picture>
                                            <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x286">
                                            <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;">
                                        </picture>
                                    </a>
                                    <div class="nt_type1_content">
                                        <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a>
                                    </div>
                                </div>
                                <div class="col">
                                    <a href="#">
                                        <picture>
                                            <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x286">
                                            <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;">
                                        </picture>
                                    </a>
                                    <div class="nt_type1_content">
                                        <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a>
                                    </div>
                                </div>
                                <div class="col">
                                    <a href="#">
                                        <picture>
                                            <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x286">
                                            <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;">
                                        </picture>
                                    </a>
                                    <div class="nt_type1_content">
                                        <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a>
                                    </div>
                                </div>
                                <div class="col">
                                    <a href="#">
                                        <picture>
                                            <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x286">
                                            <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;">
                                        </picture>
                                    </a>
                                    <div class="nt_type1_content">
                                        <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="col-inner">
                                        <a href="#">
                                            <picture>
                                                <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x286">
                                                <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;">
                                            </picture>
                                        </a>
                                        <div class="nt_type1_content">
                                            <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <a href="#">
                                        <picture>
                                            <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x286">
                                            <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;">
                                        </picture>
                                    </a>
                                    <div class="nt_type1_content">
                                        <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a>
                                    </div>
                                </div>
                                <div class="col">
                                    <a href="#">
                                        <picture>
                                            <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x286">
                                            <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;">
                                        </picture>
                                    </a>
                                    <div class="nt_type1_content">
                                        <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a>
                                    </div>
                                </div>
                                <div class="col">
                                    <a href="#">
                                        <picture>
                                            <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x286">
                                            <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;">
                                        </picture>
                                    </a>
                                    <div class="nt_type1_content">
                                        <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a>
                                    </div>
                                </div>
                                <div class="col">
                                    <a href="#">
                                        <picture>
                                            <source media="(min-width: 768px)" srcset="http://via.placeholder.com/225x286">
                                            <img src="http://via.placeholder.com/212x145" alt="Flowers" style="width:auto;">
                                        </picture>
                                    </a>
                                    <div class="nt_type1_content">
                                        <a href="#">عنوان پست تبلیغاتی حداکثر ۶۲ کارکتر با اسپیس</a>
                                    </div>
                                </div>
                            </div>

تبلیغات نیتو در موبایل:

خروجی کدهای ارائه شده در موبایل به صورت زیر خواهد بود:

Native-ad_-_Standard_Mobile_View