Cách chèn mã quảng cáo AdSense hiển thị tại các vị trí và các trang khác nhau vào Blog

Sau khi tài khoản AdSense của bạn được kích hoạt bước tiếp theo bạn cần thiết lập quảng cáo tự động và tạo các mã quảng cáo tùy chỉnh chèn vào các vị trí thích hợp của các trang khác nhau trong Blog. Tùy vào mỗi trang mà lựa chọn mã quảng cáo thích hợp (loại quảng cáo, kích thước tùy chỉnh...)

Lưu ý:

• Chèn nhiều mã quảng cáo vào một trang sẽ khiến trang tải chậm và quảng cáo không có giá cao, với mỗi trang chỉ nên chèn tối đa 3 đến 4 mã quảng cáo
• Tuyệt đối không được chèn mã quảng cáo trong menu sổ xuống, hộp thoại popup

Hiện tại bên cạnh loại quảng cáo tự động trong các đơn vị quảng cáo có 3 loại quảng cáo (tài khoản mới)

• Quảng cáo văn bản và quảng cáo hiển thị hình ảnh
• Quảng cáo trong nguồn cấp dữ liệu
• Quảng cáo trong bài viết

Căn cứ vào 3 loại quảng cáo có thể bố trí tại các trang như sau:

Quảng cáo văn bản và quảng cáo hiển thị hình ảnh

• Đầu trang chèn trong widget ngay dưới menu lấy kích thước 970x90 sau khi lấy mã sửa 970px thành 100%
• Sidebar chèn trong widget loại hiển thị biểu ngữ dọc, đáp ứng và kích thước tùy chỉnh

Quảng cáo trong nguồn cấp dữ liệu

• Chèn vào giữa các bài viết tại trang chủ tùy vào thiết kế mà lấy loại hiển thị phù hợp

Quảng cáo trong bài viết

• Chèn trong bài viết dưới tiêu đề, dưới dấu ngắt nháy, vào một vị trí bất kỳ có thể canh giữa bài, dưới chân bài viết, tùy vào thiết kế mà lấy loại hiển thị phù hợp

Hướng dẫn chèn mã quảng cáo

Phần chèn quảng cáo văn bản và quảng cáo hiển thị hình ảnh đầu trang, bên sidebar đơn giản chỉ cần chèn mã vào widget nên mình không hướng dẫn.

Hướng dẫn chèn mã quảng vào giữa các bài viết tại trang chủ

Ngoài trang chủ các bạn có thể chèn mã quảng vào các trang khác thuộc nhóm trang index, phương pháp này sẽ đặt điều kiện trong vòng lặp các bài viết

Các bạn vào chỉnh sửa mẫu template chọn chuyển đến tiện ích Blog1 chọn mở rộng cặp thẻ tag <b:includable id='main'> các bạn thêm index='item' vào trong thẻ lặp <b:loop values='data:posts' var='post'> thành <b:loop index='item' values='data:posts' var='post'>

Tiếp theo ngay dưới thẻ lặp b:loop này các bạn thêm đoạn code sau

<b:if cond='data:view.isMultipleItems'>

  <b:if cond='data:item==3'>

    <div class='post'>

      <!-- Mã quảng cáo AdSense -->

    </div>

  </b:if>

  <b:if cond='data:item==6'>

    <div class='post'>

      <!-- Mã quảng cáo AdSense -->

    </div>

  </b:if>

</b:if>

Trong đó các số 3 và 6 là vị trí hiện thị quảng cáo sau bài viết thứ 3 và bài viết thứ 6, nếu trang chủ có nhiều bài chẳng hạn 20 thì các bạn thay đổi vị trí cho hù hợp chẳng hạn sau các bài 5, 10, 15

<b:if cond='data:view.isMultipleItems'>

  <b:if cond='data:item==5'>

    <div class='post'>

      <!-- Mã quảng cáo AdSense -->

    </div>

  </b:if>

  <b:if cond='data:item==10'>

    <div class='post'>

      <!-- Mã quảng cáo AdSense -->

    </div>

  </b:if>

  <b:if cond='data:item==15'>

    <div class='post'>

      <!-- Mã quảng cáo AdSense -->

    </div>

  </b:if>

</b:if>

Hướng dẫn chèn mã quảng cáo vào bài viết

Các bạn có thể chèn mã quảng cáo dưới tiêu đề (không khuyến khích), dưới dấu ngắt nháy, vào một vị trí bất kỳ có thể canh giữa bài, dưới chân bài viết

- Chèn dưới tiêu đề: Cái này đơn giản các bạn chỉ cần tìm thẻ tiêu đề <h1> nó thường nằm trong cặp thẻ <b:includable id='post' var='post'> chèn mã quảng cáo ngay dưới nó

Chèn dưới ngắt trang (ngắt nhảy)

Phần này ít bạn để ý chèn dấu ngắt nháy hoặc có bài chèn có bài quên không chèn nhưng không sao bạn vẫn có thể chèn mã quảng cáo bên dưới nếu bài mà bạn thêm dấu ngắt thì quảng cáo hiển thị ngay dưới còn bài không chèn thì không hiển thị quảng cáo. các bạn chèn đoạn mã sau ngay dưới thẻ <data:post.body/>

<div class='adsense1'>

  <div id='ads_Code'>

    <!-- Mã quảng cáo AdSense -->

  </div>

</div>

Tiếp tục chèn đoạn script sau trước </body>

<script>//<![CDATA[

$(function() {

  var more = $('a[name="more"]')

  if (more) {

    $('#ads_Code').appendTo(more)

  } else {

    $('.adsense1').empty()

  }

})

//]]></script>

Chèn dưới chân bài viết

Cũng đơn giản các bạn chỉ cần chèn mã quảng cáo ngay trước <div class='post-footer'></div> hoặc ngay dưới thẻ <data:post.body/> đều như nhau vì thẻ này luôn nằm trên post-footer

Chèn vào một vị trí bất kỳ

Cách này các bạn chèn id vào vị trí muốn hiển thị quảng cáo có thể giữa bài như sau:

Chèn đoạn code sau ngay dưới thẻ <data:post.body/>

<div class='adsense2'>

  <div id='ads_Body'>

    <!-- Mã quảng cáo AdSense -->

  </div>

</div>

Tiếp tục chèn đoạn script sau trước </body>

<script>//<![CDATA[

$(function() {

  var ads = document.getElementById('AdSense')

  if (ads) {

    $('#ads_Body').appendTo(ads)

  } else {

    $('.adsense2').empty()

  }

})

//]]></script>

Khi viết bài mới hoặc sửa lại bài cũ các bạn cần thêm đoạn code <div id="AdSense"></div> vào vị trí muốn hiển thị bên khung soạn thảo HTML của bài viết

Yêu cầu trong template cần có thư viện jquery cái này đa số Blog đều có các bạn kiểm tra nếu không thấy thì chèn trước </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Ngoài ra các bạn cũng nên sử dụng điều kiện cho mobile như sau:

- Điều kiện chỉ tải mã trên mobile (?m=1)

<b:if cond='data:blog.isMobileRequest'>

  <!-- Mã quảng cáo AdSense -->

</b:if>

- Điều kiện không tải trên mobile (?m=1)

<b:if cond='!data:blog.isMobileRequest'>

  <!-- Mã quảng cáo AdSense -->

</b:if>