Thêm mã cho quảng cáo gốc

Khi bạn chọn tùy chọn trình chỉnh sửa HTML & CSS cho quảng cáo gốc, hãy thêm mã HTML và CSS để tùy chỉnh và tạo kiểu cho quảng cáo gốc. Bài viết này cung cấp các mẹo và mẫu để thêm mã này.

Các mẫu quảng cáo gốc tạo ra có thể phân phát ở dạng quảng cáo truyền thống (Mẫu quảng cáo do nhà xuất bản quản lý cho chiến dịch Bảo đảm có lập trình là quảng cáo có lập trình duy nhất được hỗ trợ). Để phân phát quảng cáo gốc dưới dạng cả quảng cáo truyền thống và tất cả các loại quảng cáo có lập trình, vui lòng chọn "Bắt đầu sử dụng các mẫu và tính năng tuỳ chỉnh" trong Trình chỉnh sửa thiết kế có hướng dẫn.

Ví dụ về kiểu gốc

Dưới đây là một ví dụ HTML và CSS ở kiểu gốc cho vị trí linh hoạt trong nguồn cấp dữ liệu. Kiểu gốc này được dựa trên định dạng quảng cáo gốc "bài đăng được tài trợ" có Tiêu đề, Hình ảnh và Nội dung.

Loại mã Mã mẫu

HTML kèm các biến

Loại mã	Mã mẫu
HTML kèm các biến	`<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 kèm các biến	.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 kèm các biến

.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;
}

Kiểu gốc này sẽ chuyển đổi các thành phần mẫu quảng cáo gốc như thế này:

Thành phần	Ví dụ
Tiêu đề	30 nghề phát triển nhanh nhất
Hình ảnh	jobs.jpg
Nội dung	Theo báo cáo của Cục Thống kê lao động, các ngành nghề này sẽ phát triển mạnh nhất trong vòng 10 năm tới. Danh sách này có thể làm bạn ngạc nhiên.

Thành một quảng cáo gốc như thế này:

Ví dụ về một quảng cáo gốc

HTML

Thêm đoạn mã HTML cho biết cách thức quảng cáo gốc sẽ xuất hiện.

Bạn có thể cần phải hợp tác với nhà phát triển web hoặc ứng dụng của mình để tạo mã này.
HTML của bạn có thể bao gồm JavaScript trong thẻ <script>.
Hãy chỉ bao gồm đoạn mã có liên quan đến quảng cáo vì việc bao gồm một tài liệu HTML đầy đủ sẽ ngăn chặn việc hiển thị quảng cáo trong một số trình duyệt như Internet Explorer. Ví dụ: đừng bao gồm các thẻ <doctype> hoặc <html>. Xem ví dụ ở trên.
Quảng cáo gốc không kế thừa kiểu từ trang gốc, nhưng bạn có thể nhập tệp định kiểu bên ngoài và phông chữ web bằng thẻ <link> trong HTML.

Tùy chọn cài đặt Cửa sổ mục tiêu kiểm soát xem quảng cáo gốc có mở trong cùng một thẻ hoặc một cửa sổ mới sau khi được nhấp hay không.

Quảng cáo truyền thống kế thừa chế độ cài đặt cấp đơn vị quảng cáo.
Quảng cáo có lập trình kế thừa chế độ cài đặt cấp độ mạng.

Chèn macro

Bạn cũng có thể nhấp vào Chèn macro và sử dụng các nút sau để xây dựng HTML của mình:

CacheBuster: Đảm bảo rằng có lệnh gọi mới đến máy chủ quảng cáo mỗi khi mã được thực thi, để bạn đếm chính xác số lượt hiển thị. Tìm hiểu thêm về CacheBuster.
Lượt nhấp (được đề xuất): Theo dõi lượt nhấp nếu đoạn mã không chứa các ký tự đặc biệt. Tìm hiểu thêm về lượt nhấp.
URL của trang đích khi nhấp: Chỉ định trang đích của tệp sáng tạo và trang này sẽ xuất hiện khi ai đó nhấp vào quảng cáo. Tìm hiểu thêm về URL của trang đích khi nhấp.
Nhấp chuột thoát: Theo dõi lượt nhấp nếu đoạn mã chứa các ký tự đặc biệt (ví dụ: '&', '?', '%') trong URL của trang đích khi nhấp. Tìm hiểu thêm về nhấp chuột thoát.
Trình bao bọc video: Trình bao bọc chứa trình phát video cho quảng cáo gốc. Tìm hiểu thêm về cách định cấu hình kiểu video gốc.

CSS

Cung cấp mã CSS cho biết cách thức quảng cáo gốc sẽ xuất hiện. Xem ví dụ ở trên.

Nếu bạn đang quản lý quảng cáo gốc có kích thước linh hoạt, vui lòng không sử dụng CSS định vị tuyệt đối.

Thông tin này có hữu ích không?

Chúng tôi có thể cải thiện trang này bằng cách nào?

Thêm mã cho quảng cáo gốc

HTML

Chèn macro

CSS

Thông tin này có hữu ích không?

Bạn cần trợ giúp thêm?

Hãy thử các bước tiếp theo sau: