Cách hiển thị Adsense tùy chỉnh cho giao diện Responsive

Phiên bản tương thích:

All
1.2
1.5

Yêu cầu bổ xung thêm:

cần có một tài khoản Adsense - www.google.com/adsense

Mọi thiết kế websites, forums, blogs... hiện nay đều bắt buộc cần phải có thiết kế Responsive: tức là tự điều chỉnh kích thước tùy biến theo thiết bị truy cập của người dùng như: máy tính để bàn PC, laptop, mobile, tablet.. Để người dùng có được trải nghiệm truy cập tốt hơn, như là: font chữ cần to hơn hợp hơn với máy tính bảng, tự bỏ hoặc sắp xếp lại ngăn nắp để hiển thị chi tiết hợp lý với truy cập màn hình nhỏ hơn nữa như di động... Vì vậy không mấy ngạc nhiên khi google adsense cũng đã có thêm phần hỗ trợ tùy chỉnh cho việc hiện quảng cáo này của mình.

Ở một bài viết khác trên hội quán chúng ta sẽ bàn với cách hiển thị trên các kiểu trên websites, wordpress, vbulletin... sau. Còn ở bài này chúng ta sẽ bàn tới việc tự động hiển thị quảng cáo Adsense theo kích thước giao diện Responsive của xenforo qua sự hướng dẫn cơ bản của staff Paul Brogan bên xenforo nhé.

Giao diện xenforo hỗ trợ sẵn Responsive nên có thể thoải mái truy cập bằng mọi thiết bị mà không sợ bị vỡ khung forum. Thế nên cũng không cần phải thêm bước phiền toái như chuyển người dùng qua địa chỉ dành riêng cho thiết bị như mobile nếu họ truy cập bằng di động...

Tuy giao diện xenforo đã hỗ trợ Responsive nhưng bạn cứ thế ném code adsense vào thì bình thường nó sẽ không hỗ trợ hiển thị theo được chuẩn xác. Khi chiều rộng tự điều chỉnh của thiết bị nhỏ hơn chiều rộng của quảng cáo, nó sẽ bị trồi ra và xuất hiện thanh cuộn ngang.

Vì vậy dưới đây là hướng dẫn cách hiển thị vị trí quảng cáo khác nhau của Adsense dựa theo độ rộng màn hình của các thiết bị truy cập. Điều này được dựa trên đề nghị của chính Google. Bạn có thể xem thêm tại đây: https://support.google.com/adsense/answer/1354736. Nó dựa vào JavaScript, quảng cáo sẽ không tự động đổi định dạng như bay trên cửa sổ trình duyệt khi thay đổi kích cỡ, mà thay vào đó cần tải lại trang để thấy sự thay đổi.

Đây là ví dụ cách bạn đặt mã ở Admin > Appearance > Templates (nhớ chọn giao diện đúng đang cần sửa nếu có nhiều hơn 1 style mặc định) > tìm template ad_thread_list_below_stickies

Bạn có thể tìm đặt quảng cáo ở các vị trí Hook khác trên forum qua các temp mà xenforo thiết kế riêng cho chỗ đặt quảng cáo. Search trong template từ: ad_

Để hình dung template đó có vị trí là ở đâu thì tham khảo bài viết này: ...

Màu đỏ là mã đặt quan trọng thông thường.
Màu xanh là định dạng quảng cáo khác nhau được hiển thị theo kích thước thiết bị.
Bạn hãy tạo các định dạng adsense theo các thông số dưới đây rồi thay thế slot với pub-id adsense của bạn.
Nhìn chung là toàn bộ mã bạn cần quan tâm là ở trong cái thẻ <script>...<script> ý. Cái cái râu ria còn lại thì có thể sửa khác đi hoặc bỏ đi.

Code:

<xen:hook name="ad_thread_list_below_stickies" />

<xen:if is="!{$visitor.user_id}">
    <xen:if is="{$stickyThreads}">
        <div style="text-align: center; padding: 8px 0 4px 0; border-bottom: 1px solid @primaryLighterStill">
            <script type="text/javascript">
            google_ad_client = "ca-pub-id";
            width = document.documentElement.clientWidth;
            /* Thread List Below Stickies Responsive 2 */
            google_ad_slot = "123456890";
            google_ad_width = 320;
            google_ad_height = 50;
                if (width > 483) {
                /* Thread List Below Stickies Responsive 1 */
                google_ad_slot = "123456890";
                google_ad_width = 468;
                google_ad_height = 60;
                }
                    if (width > 743) {
                    /* Thread List Below Stickies */
                    google_ad_slot = "123456890";
                    google_ad_width = 728;
                    google_ad_height = 90;
                    }
            </script>
            <script type="text/javascript"
            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
        </div>
    </xen:if>
</xen:if>

Từ những gì ở trên chúng ta có thể thấy quảng cáo sẽ hiển thị như sau:

Chiều rộng trình duyệt ứng dụng là 483 hoặc nhỏ hơn - sẽ hiện mẫu 320x50
Chiều rộng trình duyệt ứng dụng là 484 đến 743 - sẽ hiện mẫu 468x60
Chiều rộng trình duyệt ứng dụng là 744 và lớn hơn - sẽ hiện mẫu 729x90

Vì thế khi nới rộng hay thu nhỏ trình duyệt, các định dạng quảng cáo khác nhau sẽ điều chỉnh phù hợp để phục vụ.

Một VD khác cho đặt quảng cáo ở template ad_message_below: bạn có thể bỏ đi vài chi tiết thừa của code dưới này như hiển thị chữ đăng nhập để bỏ quảng cáo...

Code:

<xen:hook name="ad_message_below" />

<xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 0 AND {$thread.reply_count} > 0">
    <xen:if is="!{$visitor.user_id}">
        <li class="message">
            <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
                <div class="messageUserBlock">
                    <div class="avatarHolder">
                        <span class="helper"></span>
                        <xen:avatar user="$visitor" size="m" img="true" />
                    </div>
                    <h3 class="userText">
                    <span style="font-weight: bold">Google AdSense</span>
                    <em class="userTitle" itemprop="title">Guest Advertisement</em>
                    </h3>
                    <span class="arrow"><span></span></span>
                </div>
            </div>
            <div class="messageInfo primaryContent">
                <div class="messageContent">
                    <article>
                        <blockquote class="messageText ugc baseHtml">
                            <script type="text/javascript">
                            google_ad_client = "ca-pub-id";
                            width = document.documentElement.clientWidth;
                            /* Message Below Responsive 2 */
                            google_ad_slot = "1234567890";
                            google_ad_width = 320;
                            google_ad_height = 50;
                                if (width > 619) {
                                /* Message Below Responsive 1 */
                                google_ad_slot = "1234567890";
                                google_ad_width = 468;
                                google_ad_height = 60;
                                }
                                    if (width > 879) {
                                    /* Message Below */
                                    google_ad_slot = "1234567890";
                                    google_ad_width = 728;
                                    google_ad_height = 90;
                                    }
                            </script>
                            <script type="text/javascript"
                            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                            </script>
                            <br /><br /><label for="LoginControl"><span style="font-weight: bold; color: #004400"><a href="login/" class="concealed noOutline">Log in or Sign up</a></span></label> to hide all adverts.
                        </blockquote>
                    </article>
                </div>
            </div>
        </li>
    </xen:if>
</xen:if>

Vậy độ rộng đến 619px sẽ hiển thị định dạng 320x50
Từ giữa 620px đến 879px sẽ hiển thị định dạng 468x60
Và từ 880px trở lên sẽ hiện thị định dạng 728x90

Ở trên này là định dạng theo style mặc định của xenforo, nếu bạn có dùng style khác thì phải tự điều chỉnh lại thông số cho phù hợp nhé.

Và một vấn đề nữa bạn cần lưu ý là chính sách đặt quảng cáo adsense của Google cấm bạn đặt quảng cáo trên các trang đăng ký, trống nội dung, tìm kiếm, đăng nhập, trang contact admin, trang thông báo chuyển liên kết ngoài trong x giây... Vậy phải làm sao đây?

Rất đơn giản hãy cho nó vào một thẻ <if> điều kiện, để không hiện trên các trang đó của xenforo. Và bạn sẽ an tâm tuân thủ chính sách trên của họ. Sau đây là danh sách đầy đủ các mẫu temp mà bạn cần bỏ hiện quảng cáo lên chúng. Vì tên các mẫu temp này đại diện hiển thị và thiết lập cho các trang đó.

Danh sách đầy đủ mẫu temp cho bản xenforo 1.5. Mình sẽ cập nhật lại bản list đầy đủ mới hơn nếu các phiên bản sau của xenforo có thêm các mẫu temp mới khác mà không phù hợp với chính sách của GA. Nhưng chắc phải tới bản 2.0 mới có thêm mẫu mới cũng nên.

Code:

<xen:if is="!in_array({$contentTemplate}, array('message_page', 'error', 'search_form', 'search_form_post', 'search_form_profile_post', 'search_results', 'register_form', 'register_facebook', 'register_twitter', 'register_google', 'login', 'login_two_step', 'error_with_login', 'contact'))">
mã adsense đã tùy biến như ở trên của bạn
</xen:if>

bài do Hội Quán VN tổng hợp chỉnh sửa! chúc bạn thành công!