Hướng dẫn chèn mã Google Analytics vào trang AMP trong WordPress

1436

Chào các bạn, như ở bài trước mình đã hướng dẫn các bạn tạo trang sử dụng AMP trong WordPress. Nếu bạn nào chưa biết cách làm và muốn tìm hiểu AMP là gì, tại sao nên cài nó thì các bạn có thể xem lại bài viết:

Cách tạo Trang cho thiết bị di động được tăng tốc AMP trong WordPress

Nếu bạn nào đã tạo được rồi thì các bạn có thể sẽ phát hiện ra 1 vấn đề đó là trong Google Analytics sẽ không thấy có thống kê từ các trang sử dụng AMP, tại sao lại vậy ? Câu trả lời đơn giản bởi vì giao diện trang sử dụng AMP độc lập hoàn toàn với trang không sử dụng AMP trong WordPress.

Về vấn đề Analytics là gì thì mình sẽ không giải thích hay nói về nó nữa, còn bạn nào có nhu cầu muốn tìm hiểu về nó có thể để lại “bình luận facebook” phía dưới bài viết này, nếu nhiều mình sẽ viết riêng 1 bài về nó.

Ok, bây giờ chúng ta sẽ đi vào vấn đề chính nha ^^.


Sau khi cài đặt xong plugin AMP như ở bài trước chúng ta sẽ có giao diện như sau:

giao dien trang su dung AMP wordpress

Tuy nhiên giao diện này là 1 giao diện đơn giản đã loại bỏ hầu hết những thẻ html/css/javascript cũng như những thứ không cần thiết. Do đó, để thêm mã Analytics các bạn làm theo các bước sau:

Bước 1: Vào website Google Analytics vào mục Quản trị viên (1), ở cột thuộc tínchọn Thông tin theo dõi > Mã theo dõi (2) để lấy lại mã theo dõi.

Lấy mã theo dõi trong Google Analytics
Lấy mã theo dõi trong Google Analytics

Ở phần này các bạn chỉ cần copy đoạn “UA-xxxxxxxx-x” là được.

Bước 2: Các bạn thay thế đoạn mã đã lấy được ở bước 1 thay vào “UA-76285936-1” được bôi đậm màu đỏ trong đoạn code dưới, lưu lại chuẩn bị cho bước 3:

  1. <amp-analytics type=”googleanalytics” id=”analytics1″>
  2. <script type=”application/json”>
    {
  3. “vars”: {
  4. “account”: “UA-76285936-1
  5. },
  6. “triggers”: {
  7. “trackPageview”: {
  8. “on”: “visible”,
  9. “request”: “pageview”
  10. }
  11. }
  12. }
    </script>
  13. </amp-analytics>

Bước 3:

Cách 1: Đăng nhập vào phần quản trị website chọn Gói mở rộng > Đã cài đặt (1), tìm đến plugin AMP sau đó nhấp vào chỉnh sửa (2).

them ma analytics vao trang su dung amp

Sau khi trang mới được mở ra, các bạn chú ý bên trái màn hình, các bạn tìm đến đoạn đường dẫn có tên như sau amp/templates/footer.php (1) và click vào nó, sau đó dán đoạn code Analytics đã lấy được ở bước 2 vào phía sau thẻ </footer> (hoặc trước thẻ <footer class…> đều được).:

chen ma analytics vao website cai dat giao dien amp

Các bạn nhấp Cập nhật tập tin để lưu.

Tiếp theo, vẫn ở trang đó, các bạn nhìn sang bên trái tìm đến đoạn đường dẫn có tên amp/templates/single.php và chèn đoạn mã phía dưới vào vị trí như trong hình:

<script custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js” async></script>

chen ma analytics

Như vậy mình đã hướng dẫn xong các bạn chèn lại mã theo dõi của Analytics vào trang sử dụng AMP trong WordPress.

Cách 2: Nếu các bạn cảm thấy khó khăn thì ở Cách 1 thì các bạn có thể cài thêm plugin Glue for Yoast SEO & AMP (trước đó bạn phải cài Plugin Yoast SEO nhé. ), sau khi cài xong thì kích hoạt luôn nhé:

chen analytics vào trang su dung amp trong wordpress

Sau khi các bạn cài xong, các bạn vào phần SEO > AMP:

huong dan cai analytics cho website su dung amp

Bây giờ bạn có thể tuỳ chỉnh cho site của bạn bằng cách vào từng mục để chọn, ở đây mình hướng dẫn chèn mã analytics nên các bạn vào luôn phần analytics và copy đoạn code ở Bước 2 phía trên chèn vào rồi lưu lại là xong nhé ;).

huong dan them code analytic vao site cai amp

Chúc các bạn thành công 🙂 !

CHIA SẺ
Bài trướcHướng dẫn cài đặt AMP cho WordPress
Bài tiếpHàm SUM – 10 Hàm cơ bản trong EXCEL (Phần 1)
Mình xây dựng blog này với mục đích chia sẻ những kinh nghiệm, thủ thuật của mình liên quan đến các lĩnh vực như CNTT, Marketing Online, MMO, Đồ Họa, SEO, ... Rất mong nhận được sự ủng hộ của các bạn.