Mẹo: Làm đẹp URL khi sử dụng UTM

Chào mọi người,

Hôm nay mình được 1 đồng nghiệp nói về cái vụ làm cách nào để xóa cái UTM tracking đi bởi vì như mọi người biết nếu sử dụng cái URL builder để theo dõi các chiến dịch (Campaign) mình đã làm thì rất tiện lợi nhưng mà nhìn cái URL lại vừa dài vừa xấu.

Vậy làm cách nào để mà vừa theo dõi được chiến dịch của mình trên Google Analytics mà lại vẫn hiển thị cái URL đẹp? Và mình đã tìm được 1 đoạn code để làm điều kì diệu đó

Ưu điểm:

Hoạt động độc lập nên không lo nó ảnh hưởng gì tới Google Analytics, bạn sẽ vẫn có thể kiểm tra hiệu quả của các chiến dịch thông qua Google Analytics một cách bình thường.
Đơn giản, dễ làm
Tăng trải nghiệm của người dùng. Họ sẽ không thấy 1 cái URL vừa dài vừa xấu do cái tracking của bạn nữa.

Cách làm:

Nếu bạn tự thêm code Google Analytics bằng tay thì có thể thêm code dưới dây vào cuối trang (phần footer). Hoặc nếu không thì cứ thêm nó vào dưới code của Google Analytics là được.

<script type="text/javascript">
var utmRemoverRun = false;
function utmRemover() {
 if (!utmRemoverRun) { // only run once
 utmRemoverRun = true;
 var cleanSearch = window.location.search
  .replace(/utm_[^&]+&?/g, '') // removes utm_xxx parameters
  .replace(/&$/, '')  // removes & if last character
  .replace(/^\?$/, '')  // removes ? if only remaining character
  ;
 // some pass utm_xxxx in the hash 
 var cleanHash = window.location.hash
  .replace(/utm_[^&]+&?/g, '') // removes utm_xxx parameters
  .replace(/&$/, '')  // removes & if last character
  .replace(/^\#$/, '')  // removes # if only remaining character
  ;
  
 window.history.replaceState({}, '', window.location.pathname + cleanSearch + cleanHash);
 }
};
setTimeout(utmRemover, 2000); // remove after 2 second
// These need to run after the pageview command 
if (typeof ga !== 'undefined') ga(utmRemover);  // remove after normal Analytics has run
if (typeof __gaTracker !== 'undefined') __gaTracker(utmRemover); // remove after Yoast Analytics has run
</script>

Còn nếu bạn sử dụng WordPress thì có thể thêm vào file functions.php đoạn code dưới đây:

function utm_remover_script() {
 $output="
<script type=\"text/javascript\">
var utmRemoverRun = false;
function utmRemover() {
 if (!utmRemoverRun) { // only run once
 utmRemoverRun = true;
 var cleanSearch = window.location.search
  .replace(/utm_[^&]+&?/g, '') // removes utm_xxx parameters
  .replace(/&$/, '')  // removes & if last character
  .replace(/^\?$/, '')  // removes ? if only remaining character
  ;
 // some pass utm_xxxx in the hash
 var cleanHash = window.location.hash
  .replace(/utm_[^&]+&?/g, '') // removes utm_xxx parameters
  .replace(/&$/, '')  // removes & if last character
  .replace(/^\#$/, '')  // removes # if only remaining character
  ;
  
 window.history.replaceState({}, '', window.location.pathname + cleanSearch + cleanHash);
 }
};
setTimeout(utmRemover, 2000); // remove after 2 second
// These need to run after the pageview command 
if (typeof ga !== 'undefined') ga(utmRemover);  // remove after normal Analytics has run
if (typeof __gaTracker !== 'undefined') __gaTracker(utmRemover); // remove after Yoast Analytics has run
</script>
 ";
 echo $output;
}
add_action( 'wp_footer', 'utm_remover_script' );

Chúc các bạn thành công nhé. Nếu không làm được thì có thể hỏi mình thêm (Dù mình chả biết tẹo gì về kĩ thuật đâu, nhưng chắc vẫn support mọi người được).

Bài viết copy nguyên si của Mèo Siêu Lười: http://meosieuluoi.com/kien-thuc/marketing/cach-tao-url-dep-du-su-dung-utm-tracking-code/ nên các bạn có thắc mắc gì thì có thể pm cho bạn ý cho lẹ nhé!

P/s: Các bạn cũng có thể dụng dụng mã này trên Google Tag Manager nhé, nhanh, gọn, lẹ hơn rất nhiều, tạo 1 tag (thẻ) mới Custom HTML (HTML tùy chỉnh) paste code trên vào chọn All pages (Tất cả các trang), xong publish version mới là xong roài (mất 30s)