Chèn Google Adsense vào AMP WordPress không sử dụng Plugin

Có khá nhiều bạn sử dụng plugin AMP WordPress, đây là plugin dành cho trang đã tối ưu cho thiết bị di động (xem Google AMP là gì?).

Việc sử dụng plugin sẽ giảm doanh số khi người dùng truy cập bằng mobile, hôm nay tiện có một bạn học viên có hỏi nên mình share lại cách mình đã làm.

Nhiều bài viết trên thế giới chia sẻ cách chèn Google Adsense vào trang AMP nhưng thường là edit trong plugin AMP.

Mình thì không thích làm như vậy vì mỗi khi plugin update thì lại phải edit mất thời gian và không tối ưu, mình thì thường edit trong file functions.php của theme.

Để chèn Google Adsense vào trang AMP trên WordPress mà không sử dụng plugin thì có bạn có thể làm theo hướng dẫn dưới đây.

Bước 1

Hãy truy cập vào tài khoản Google Adsense của bạn từ menu bên trái chọn Các đơn vị quảng cáo -> Nội dung -> Tạo đơn vị quảng cáo (quảng cáo đáp ứng – Responsive) như hình dưới:

Tạo quảng cáo Adsense đáp ứng - Responsive
Tạo quảng cáo Adsense đáp ứng – Responsive

Bước 2

Cũng tương tự như cài Google Analytics cho AMP trên WordPress thì việc chèn đoạn code .js hỗ trợ quảng cáo AMP (1).

Vào thư mục theme đang sử dụng, mở file functions.php và thêm đoạn code:

/**
 * Add JS AD vao trang AMP.
 */
function isa_load_amp_adsense_script( $data ) {
    $data['amp_component_scripts']['amp-ad'] = 'https://cdn.ampproject.org/v0/amp-ad-0.1.js';
    return $data;
}
add_filter( 'amp_post_template_data', 'isa_load_amp_adsense_script' );
/**
 * Het JS AD vao trang AMP.
 */

Bước 3

Chèn đoạn code hiển thị quảng cáo Google Adsense vào trang AMP, ở đây mình hướng dẫn các bạn 2 cách:
Lưu ý: thay giá trị XXX (ID nhà xuất bản) và YYY (ID đơn vị quảng cáo của bạn). Theo mình bạn nên chèn phần 2 đó là vào phía trên nội dung và bên trong nội dung trang AMP.

Chèn quảng cáo vào phía trên nội dung trên trang AMP

Thêm đoạn code phía dưới nhớ thay ID của bạn vào file functions.php

/**
 * Hien thi quang cao phia tren noi dung
 */
add_action( 'pre_amp_render_post', 'isa_amp_add_content_filter' );
 
function isa_amp_add_content_filter() {
    add_filter( 'the_content', 'isa_amp_adsense_above_content' );
}
 
function isa_amp_adsense_above_content( $content ) {
 
    $publisher_id = 'ca-pub-XXX';
 
    $ad_slot = 'YYY';
 
    // Add Adsense ad above AMP content
    $ad_code = '<amp-ad layout="fixed-height" height="100" type="adsense" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '"></amp-ad>';
 
    return $ad_code . $content;
}

Chèn quảng cáo vào phía trên nội dung và bên trong nội dung trên trang AMP

Thêm đoạn code phía dưới để quảng cáo Adsense hiển thị phía trên nội dung và bên trong nội dung (nhớ thay ID của bạn vào file functions.php).
Đây là cách mình đang dùng, các bạn có thể bỏ qua đoạn trên.

/**
 * Hien thi quang cao phia tren noi dung va ben trong noi dung
 */
add_action( 'pre_amp_render_post', 'isa_amp_add_content_filter' );
 
function isa_amp_add_content_filter() {
    add_filter( 'the_content', 'isa_amp_adsense_above_within_content' );
}
 
function isa_amp_adsense_above_within_content( $content ) {
 
    $publisher_id = 'ca-pub-XXX';
 
    $ad_slot = 'YYY';
 
    $ad_code_end = ' type="adsense" data-ad-client="' . $publisher_id . '" data-ad-slot="' . $ad_slot . '"></amp-ad>';
 
    $atf_ad_code = '<amp-ad layout="fixed-height" height="100"' . $ad_code_end;
 
    $btf_ad_code = '<amp-ad layout="responsive" width="300" height="250"' . $ad_code_end;
 
    // Hien thi quang cao trong noi dung sau doan so 5 cua noi dung
    $new_content = isa_insert_after_paragraph( $btf_ad_code, 5, $content );
 
    return $atf_ad_code . $new_content;
 
}
function isa_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

Lưu ý đoạn code phía trên khi chèn vào file functions.php thì quảng cáo số 1 hiện thị phía trên nội dung bài viết.

Quảng cáo số 2 sẽ hiển thị sau đoạn số 5 trong nội dung của bài viết, để thay đổi vị trí bạn có thể thay đổi số 5 thành vị trí bạn muốn hiển thị.

Trong trường hợp nội dung của bạn ngắn hơn 5 đoạn thì quảng cáo thứ 2 sẽ không hiển thị.

Hi vọng bài viết sẽ giúp các bạn có thêm thu nhập khi cài Google AMP. Thắc mắc các bạn vui lòng comment phía dưới mình sẽ hỗ trợ.
Chúc các bạn thành công và đừng quên chia sẻ bài viết giúp mình tới mọi người!

Chèn Google Adsense vào AMP WordPress không sử dụng Plugin
5 (100%) 7 votes

Trả lời

Cùng chủ để Thủ thuật Wordpress

Đăng ký nhận tài liệu SEO

Điền email vào form dưới đây để đăng ký nhận tin tức SEO, tài liệu SEO, Ebook SEO mới nhất!