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
4 phút đọc

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 Site Footer.

<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

Viết bài trên Google Docs, xuất bản trên Ghost

Hướng dẫn cách viết blog trên Google Docs và xuất bản trên Ghost CMS.

Viết bài trên Google Docs, xuất bản trên Ghost

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Cáchtạo hiệu ứng lightbox cho video Youtube đơn giản bằng Fanyapps cho Ghost.

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Thêm hiệu ứng lightbox cho Ghost siêu đơn giản với Fluidbox

Cách đơn giản để thêm hiệu ứng lightbox cho ảnh, vừa nhanh vừa đẹp.

Thêm hiệu ứng Lightbox cho ảnh siêu đơn giản cho Ghost
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.

bởi @CườngTrần