เพิ่มโค้ดสำหรับโฆษณาเนทีฟ

เมื่อเลือกตัวเลือกตัวแก้ไข HTML และ CSS สำหรับโฆษณาเนทีฟ คุณจะต้องเพิ่มโค้ด HTML และ CSS เพื่อปรับและกำหนดสไตล์โฆษณาเนทีฟ บทความนี้ให้เคล็ดลับและตัวอย่างสำหรับการเพิ่มโค้ดดังกล่าว

โฆษณาเนทีฟที่ได้จะแสดงเป็นโฆษณาแบบดั้งเดิม (ครีเอทีฟโฆษณาที่ผู้เผยแพร่โฆษณาจัดการสำหรับการรับประกันแบบเป็นโปรแกรมเป็นโฆษณาแบบเป็นโปรแกรมเพียงประเภทเดียวที่รองรับ) หากต้องการแสดงครีเอทีฟโฆษณาเนทีฟเป็นทั้งโฆษณาแบบดั้งเดิมและแบบเป็นโปรแกรมทุกประเภท โปรดเลือก "เริ่มต้นด้วยเทมเพลตและปรับแต่ง" ในตัวแก้ไขดีไซน์ที่มีคำแนะนำ

ตัวอย่างสไตล์โฆษณาเนทีฟ

มาดูตัวอย่างของ HTML และ CSS ในสไตล์โฆษณาเนทีฟสำหรับพื้นที่โฆษณาแบบไหลในฟีด สไตล์โฆษณาเนทีฟนี้พิจารณาจากรูปแบบโฆษณาเนทีฟ "โพสต์ที่มีผู้สนับสนุน" ที่มีตัวแปรหัวเรื่อง รูปภาพ และเนื้อหา

ประเภทโค้ด โค้ดตัวอย่าง

HTML ที่มีตัวแปร

ประเภทโค้ด	โค้ดตัวอย่าง
HTML ที่มีตัวแปร	`<div class="sponsored-post"> <div class="thumbnail"></div> <div class="content"> <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1> <p>[%Body%]</p> <div class="attribution">SPONSORED</div> </div> </div>`
CSS ที่มีตัวแปร	.sponsored-post { background-color: #fffdeb; font-family: sans-serif; padding: 10px 20px 10px 20px; } .content { overflow: hidden; } .thumbnail { width: 120px; height: 100px; float: left; margin: 0 20px 10px 0; background-image: url([%Image%]); background-size: cover; } h1 { font-size: 18px; margin: 0; } a { color: #0086b3; text-decoration: none; } p { font-size: 16px; color: #444; margin: 10px 0 10px 0; } .attribution { color: #fff; font-size: 9px; font-weight: bold; display: inline-block; letter-spacing: 2px; background-color: #ffd724; border-radius: 2px; padding: 4px; }


<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>

CSS ที่มีตัวแปร

.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}

สไตล์โฆษณาเนทีฟนี้จะแปลงคอมโพเนนต์ครีเอทีฟโฆษณาในแบบต่อไปนี้

คอมโพเนนต์	ตัวอย่าง
บรรทัดแรก	The 30 Fastest Growing Jobs
รูปภาพ	jobs.jpg
เนื้อหา	According to the U.S Bureau of Labor Statistics, these occupations will grow the most in the next 10 years. The list might surprise you.

ให้เป็นโฆษณาเนทีฟที่มีรูปแบบต่อไปนี้

ตัวอย่างโฆษณาเนทีฟ

HTML

เพิ่มข้อมูลโค้ด HTML ที่บ่งบอกลักษณะการแสดงโฆษณาเนทีฟ

คุณอาจต้องสร้างโค้ดร่วมกับนักพัฒนาเว็บหรือนักพัฒนาแอป
ใส่ JavaScript ไว้ในแท็ก <script> ของโค้ด HTML ได้
โปรดรวมเฉพาะข้อมูลโค้ดที่เกี่ยวข้องกับโฆษณา เนื่องจากการรวมเอกสาร HTML แบบเต็มจะทำให้โฆษณาไม่แสดงในบางเบราว์เซอร์ ซึ่งรวมถึง Internet Explorer เช่น อย่ารวมแท็ก <doctype> หรือ <html> ดูตัวอย่างด้านบน
โฆษณาเนทีฟจะไม่นำสไตล์เดิมจากหน้าระดับบนสุดมาใช้ แต่คุณจะนำเข้าสไตล์ชีตภายนอกและแบบอักษรสำหรับเว็บที่มีแท็ก <link> ใน HTML ได้

การตั้งค่าหน้าต่างเป้าหมายจะควบคุมว่าจะให้โฆษณาเนทีฟเปิดในแท็บเดียวกันหรือในหน้าต่างใหม่หลังจากที่มีการคลิก

โฆษณาแบบดั้งเดิมจะนำการตั้งค่าเดิมในระดับหน่วยโฆษณามาใช้
โฆษณาแบบเป็นโปรแกรมจะนำการตั้งค่าเดิมในระดับเครือข่ายมาใช้

แทรกมาโคร

คุณอาจคลิกแทรกมาโครและใช้ปุ่มต่อไปนี้เพื่อช่วยสร้าง HTML ได้

CacheBuster: ดูแลให้มีการเรียกครั้งใหม่ไปที่เซิร์ฟเวอร์โฆษณาทุกครั้งที่เรียกใช้งานโค้ดเพื่อให้นับการแสดงผลได้อย่างถูกต้อง ดูข้อมูลเพิ่มเติมเกี่ยวกับ CacheBuster
การคลิก (แนะนำ): ติดตามการคลิกหากข้อมูลโค้ดไม่มีสัญลักษณ์พิเศษ ดูข้อมูลเพิ่มเติมเกี่ยวกับการคลิก
URL การคลิกผ่าน: ระบุหน้า Landing Page ของครีเอทีฟโฆษณาที่ควรจะปรากฏเมื่อมีผู้คลิกโฆษณา ดูข้อมูลเพิ่มเติมเกี่ยวกับ URL การคลิกผ่าน
การคลิกที่กำหนดเป็นอักขระหลีก: ติดตามการคลิกหากข้อมูลโค้ดมีสัญลักษณ์พิเศษ (เช่น "&", "?", "%") ใน URL การคลิกผ่าน ดูข้อมูลเพิ่มเติมเกี่ยวกับการคลิกที่กำหนดเป็นอักขระหลีก
Wrapper วิดีโอ: Wrapper ที่มีวิดีโอเพลเยอร์สำหรับโฆษณาเนทีฟ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีกำหนดค่าสไตล์วิดีโอเนทีฟ

CSS

ระบุโค้ด CSS ที่บ่งบอกลักษณะการแสดงโฆษณาเนทีฟ โปรดดูตัวอย่างข้างต้น

หากคุณดูแลการแสดงโฆษณาเนทีฟขนาดแบบไหล โปรดอย่าใช้ CSS ที่มีตำแหน่งสัมบูรณ์

ข้อมูลนี้มีประโยชน์ไหม

เราจะปรับปรุงได้อย่างไร

เพิ่มโค้ดสำหรับโฆษณาเนทีฟ

HTML

แทรกมาโคร

CSS

ข้อมูลนี้มีประโยชน์ไหม

หากต้องการความช่วยเหลือเพิ่มเติม

ลองทำตามขั้นตอนต่อไปนี้