Xem Nội Dung Ngay
Bạn đã thành công đăng ký ghostFam
Tuyệt! Next, complete checkout for full access to ghostFam
Chào mừng bạn quay trở lại! Bạn đã đăng nhập thành công.
Thành công! Tài khoản của bạn đã kích hoạt đầy đủ, bây giờ bạn có thể xem tất cả bài viết.
Thành công! Your billing info is updated.
Billing info update failed.

Làm thế nào để chèn Google Analytics vào Ghost? [Best Practice]

Kinh nghiệm thực tế chèn Google Analytics vào Ghost để theo dõi traffic chính xác và tốc độ.

Cường Trần
Cường Trần
3 phút đọc
Làm thế nào để chèn Google Analytics vào Ghost? [Best Practice]

Ghost cũng giống WordPress, không có tích hợp sẵn bất cứ chức năng thống kê hoặc theo dõi nào trong lõi. Bắt buộc bạn phải cài đặt thêm vào.

Google Analytics là "must-have" tool miễn phí nên thêm vào Ghost.

Ghost không có plugin để bạn cài đặt nhanh vào site nhưng bạn vẫn có thể cài đặt mã track GA chính xác hoàn hảo.

Cách làm khá đơn giản như sau.

Chèn Google Analytics với gtag.js thông thường

Sau khi tạo Property xong trong Google Analytics thì bạn vào Tracking Code, copy toàn bộ.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90943745-4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-XX');
</script>

Dán mã gtagjs vào Ghost Header và hoàn tất.

Dán vào {{ghost_head}}

Cách làm này là tiêu chuẩn để chèn Google Analytics vào bất cứ website nào không riêng gì Ghost.

Chèn Google Analytics rút gọn (minimal Analytics)

Nếu bạn muốn tăng tốc và chấp nhận lượt bỏ một số tính năng theo dõi nâng cao của Google Analytics thì bạn dùng cách này.

Bạn copy và paste đoạn mã sau vào {{ghost_head}}.

<script>
  (function(a,b,c){var d=a.history,e=document,f=navigator||{},g=localStorage,
  h=encodeURIComponent,i=d.pushState,k=function(){return Math.random().toString(36)},
  l=function(){return g.cid||(g.cid=k()),g.cid},m=function(r){var s=[];for(var t in r)
  r.hasOwnProperty(t)&&void 0!==r[t]&&s.push(h(t)+"="+h(r[t]));return s.join("&")},
  n=function(r,s,t,u,v,w,x){var z="https://www.google-analytics.com/collect",
  A=m({v:"1",ds:"web",aip:c.anonymizeIp?1:void 0,tid:b,cid:l(),t:r||"pageview",
  sd:c.colorDepth&&screen.colorDepth?screen.colorDepth+"-bits":void 0,dr:e.referrer||
  void 0,dt:e.title,dl:e.location.origin+e.location.pathname+e.location.search,ul:c.language?
  (f.language||"").toLowerCase():void 0,de:c.characterSet?e.characterSet:void 0,
  sr:c.screenSize?(a.screen||{}).width+"x"+(a.screen||{}).height:void 0,vp:c.screenSize&&
  a.visualViewport?(a.visualViewport||{}).width+"x"+(a.visualViewport||{}).height:void 0,
  ec:s||void 0,ea:t||void 0,el:u||void 0,ev:v||void 0,exd:w||void 0,exf:"undefined"!=typeof x&&
  !1==!!x?0:void 0});if(f.sendBeacon)f.sendBeacon(z,A);else{var y=new XMLHttpRequest;
  y.open("POST",z,!0),y.send(A)}};d.pushState=function(r){return"function"==typeof d.onpushstate&&
  d.onpushstate({state:r}),setTimeout(n,c.delay||10),i.apply(d,arguments)},n(),
  a.ma={trackEvent:function o(r,s,t,u){return n("event",r,s,t,u)},
  trackException:function q(r,s){return n("exception",null,null,null,null,r,s)}}})
  (window,"UA-XXXXXXX-XX",{anonymizeIp:true,colorDepth:true,characterSet:true,screenSize:true,language:true});
</script>

Thay đổi UA-XXXXX-XX thành mã tracking Analytics của bạn.

Với code trên bạn sẽ tracking được pageviewsuser, là các thang đo cần thiết để theo dõi traffic.

Tôi cũng đang dùng cách này trên ghostFam để tối ưu tốc độ.

Chèn Google Analytics vào giao diện AMP

Nếu bạn bật tính năng AMP, bạn cần chèn thêm Google Analytics vào cho giao diện này để tránh mất thông tin theo dõi từ người dùng trên di động.

Ghost hỗ trợ AMP sẵn và hỗ trợ luôn Google Analytics cho AMP hoàn hảo.

Bạn vào Integration > AMP > Dán mã track Google Analytics Tracking ID (UA-XXXXXXXX-XX) vào để kích hoạt.

Lời kết...

Ghost có sẵn tính năng chèn code vào Head tag và Foot tag cực kỳ tiện lợi và hoạt động rất chuẩn.

So với WordPress thì Ghost vượt trội hơn rất nhiều về tính năng chèn code.

Kể cả khi bạn muốn chèn Google Tag Manager bạn cũng có thể chèn dễ dàng không trở ngại.

Nếu bạn cần hỗ trợ trong quá trình chèn code Google Analytics, hãy thoải mái để lại bình luận bên dưới nhé!

Hướng Dẫn

Bạn có thể quan tâm

Thành viên Mở

Hướng dẫn tạo trang liên hệ bằng HTML form, không phụ thuộc Ghost theme

Cách tạo một trang liên hệ với HTML form để tối ưu tốc độ tải trang của website Ghost.

Hướng dẫn tạo trang liên hệ bằng HTML form, không phụ thuộc Ghost theme
Thành viên Mở

Lỗi không đổi được địa chỉ email người gửi trong Ghost? Đây là cách 🤫

Cách tự sửa lỗi không thay đổi được email người gửi trong Ghost CMS.

Lỗi không đổi được địa chỉ email người gửi trong Ghost? Đây là cách 🤫
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.