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

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

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

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

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

ประเภทโค้ด โค้ดตัวอย่าง
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;
}

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

คอมโพเนนต์ ตัวอย่าง
หัวเรื่อง 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 ที่มีตำแหน่งสัมบูรณ์

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

เราจะปรับปรุงได้อย่างไร
ค้นหา
ล้างการค้นหา
ปิดการค้นหา
แอป Google
เมนูหลัก
339380360275011988
true
ค้นหาศูนย์ช่วยเหลือ
true
true
true