31 C
Hanoi
Thứ Sáu, Tháng Ba 29, 2024
spot_img

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

Truy cập:

Chia sẻ:

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 🙂 !

5 1 đánh giá
Đánh giá
Công Việt Blog
Công Việt Bloghttps://congvietit.com
Chào các bạn, mình là Công Việt, mình đến từ kênh Youtube Công Việt Blog. Blog này hiểu đơn giản mình viết những thứ mình học được, áp dụng được và cung cấp những tài nguyên mà mình sử dụng, cũng là nơi để mình lưu trữ tài nguyên. Phần "Thành viên VIP" với gói chỉ 50k để giúp mình duy trì website mà thôi, hi vọng được sự ủng hộ của các bạn.
Theo dõi
Thông báo về
guest
0 Bình luận
Inline Feedbacks
View all comments
banner quang cao hostinger-congvietblog-congvietit
ma giam gia khi mua hosting vps congvietitcom

Bài viết liên quan

Chia sẻ File Photoshop quảng cáo Mỹ Phẩm ra nhiều data nhất của Công Việt Blog

Hê nhô, dưới đây là 1 trong những mẫu ảnh quảng cáo mình chạy hiệu quả nhất trong...

Kích thước hình ảnh quảng cáo bài viết Facebook chuẩn 2024

Một bài viết quảng cáo thì không thể thiếu hình ảnh, mà đơn giản 1 bài viết trên...

Hướng dẫn chèn Messenger Facebook vào Website

Chào mừng đến với hướng dẫn chính thức của Công Việt Blog về cách chèn Messenger Facebook vào...

Hướng dẫn trang trí cành Mai – Câu đối đón Tết cho Website

Trong nền văn hóa Việt Nam, việc trang trí đón Tết không chỉ là một truyền thống mà...
0
Hãy cho mình xin 1 bình luận nha bạn yêu !!!x
Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai