Cài đặt mã MGID Widget trên nền tảng Blogger

Giới thiệu

Mã MGID widget (Simple JS) là mã cài đặt MGID cấp website mà nhà phát hành sử dụng để tích hợp các widget trên một website. Không như mã cài đặt tiêu chuẩn, Simple JS tag được thiết kế gọn nhẹ và hiệu quả, đảm bảo tác động tối thiểu đến hiệu suất trang và tránh tạo thêm việc cho nhà phát hành.

Mã cài đặt widget chứa hai phần:

  1. Head Script: Đây là MGID preloader được đặt bên trong phần <HEAD> của website.

Script mẫu:

<script src="https://jsc.mgid.com/site/123456.js" async></script>

2. Body Container: Đây là div element nơi MGID widget sẽ được render bên trong bài blog.

Script mẫu:

<!-- place in the body --> 
<div data-type="_mgwidget" data-widget-id="1464221"></div>
<script>
(function(w,q){w[q]=w[q]||[];w[q].push(["_mgc.load"])})(window,"_mgq");
</script>

Cách tích hợp mã widget MGID (Simple JS) vào nền tảng Blogger

Phương án 1 - Sử dụng Layout Builder

1. Đăng nhập vào Blogger và click mũi tên ở phía trên bên trái màn hình. Từ menu thả xuống, chọn blog mà ta muốn hiển thị quảng cáo.

Bloger_add_1

2. Từ bảng Menu, chọn Layout, chọn khu vực ta muốn đặt quảng cáo và click vào Add a Gadget.

Bloger_add_2

3. Click vào phần HTML/Javascript trong cửa sổ pop-up. Quan trọng: Đừng nhập title (tiêu đề) ở giai đoạn này.

Bloger_add_3

4. Tạo Gadget đầu tiên cho Head script. Dán Head Script vào phần Content (Nội dung). Di chuyển gadget đến phần Header.

Bloger_1

GIF 1.

Gif_1_blogger_HEAD_part

5. Lặp lại các bước trước để tạo Gadget thứ hai cho Body container.
6. Di chuyển Body Gadget đến vị trí mong muốn (ví dụ như bên dưới các bài blog). Click Save (Lưu) và kiểm tra blog.

Bloger_2

GIF 2.

Gif_2_blogger_BODY_part

Có thể dịch chuyển hoặc xáo trộn các card (thẻ) tùy theo loại mã quảng cáo và ưu tiên của mình.

Phương án 2 – Dùng HTML Editor

  1. Mở bảng quản trị Blogger.
  2. Từ bảng Menu, chọn Theme (chủ đề).
  3. Chọn theme, click vào biểu tượng mũi tên More (Thêm) và chọn Edit HTML (Chỉnh sửa HTML) để xem mã của mẫu website.

    Bloger_3

    GIF 3.

    Gif_3_blogger

    4. Thêm Head Script bên trong mẫu trang.

    Mở thanh tìm kiếm trên trang (sử dụng Ctrl + F trên Windows hoặc Command + F trên macOS). Nhập text <HEAD> và tìm required element (phần tử bắt buộc). Bên dưới required element, thêm script.

    GIF 4.

    Gif_4_blogger

    Bloger_4

    5. Thêm Body Container script bên trong mẫu trang.

    Phát hiện vị trí mà widget sẽ hiển thị. Cách dễ nhất là sử dụng browser inspector tool (công cụ kiểm tra trình duyệt) và tìm tên của element (phần tử) nơi MGID widget sẽ hiển thị. Ví dụ như chúng ta sẽ đặt một widget sau một bài viết và phần post-outer.

    Bloger_5

    Tìm element trong HTML editor, chèn Body Container vào vị trí cần thiết trước hoặc sau element đã chọn.

    Bloger_6

    Click Save (Lưu) trong HTML Editor. MGID widget sẽ bắt đầu hiển thị ngay lập tức.

    Bloger_7

    Gif_5_blogger

    Trong một số trường hợp, ta cần xóa cache (bộ nhớ đệm) để các widget xuất hiện.

    Bloger_8