VuePress에서 GA를 적용해보자
vuepress의 공식문서에서는 GA의 적용 방법이 나와있다.
하지만 Vuepress 버전 1에서는 유니버셜 태그를 이용하라고 나와있었다.
유니버셜 태그는 2023년 이후에, 종료되기 때문에 GA4로 적용하는 방법을 찾고싶었다.
나는 v2가 아직 베타버전이었기 때문에, v1에서 작업하고 있었는데, GA4태그를 이용해서 할 수는 없을까? 방법을 찾아보다가 깃허브 이슈를 확인할 수 있었다.
여기서는 버전1에서도 GA4태그를 적용할 수 있는 방법을 알려주었다.
.vuepress/config.js
파일의 head속성에 ‘script’의 코드를 추가해주면 된다.
module.exports = {
head: [
[
'script',
{
async: true,
src: '<https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX>',
},
],
[
'script',
{},
[
"window.dataLayer = window.dataLayer || [];\\nfunction gtag(){dataLayer.push(arguments);}\\ngtag('js', new Date());\\ngtag('config', 'G-XXXXXXXXXX');",
],
],
],
};
위 G-XXXXXXXXX 는 본인의 GA에 들어가서 GA4 태그로 변경을 해주어야한다.
본인의 config.js에 head속성이 아래에 더 있는지 살펴볼 것을 권유한다.
테마 공식문서에서 head속성에 추가해주어야 했던 부분을 잊고, 계속 GA가 적용이 안되었었다..
모두 실수하지 않고 GA를 적용을 할 수 있길..
GA 태그 번호는 env파일에서 관리할 수 있도록 코드도 수정을 해야겠다.
GA가 잘 적용되었는지 확인해보자
프로젝트를 배포해준 이후, 배포한 사이트의 콘솔을 켜보자.
콘솔창에 gtag 를 쳐보았을 때, 함수가 뜨면 성공한다.
GA가 정상 작동이 하지 않는다면, gtag is not defined라는 에러가 뜰 것이다
GA에서 확인해보면, 방문자 수가 뜨는 것을 확인할 수 있다.
버튼을 몇번 눌렀는지 이벤트 적용하는 방법
또한, ga를 적용하면서 어떤 이벤트를 사용자가 몇번 클릭했는지도 확인이 가능하도록 이벤트를 붙여보는 작업도 해보았다.
처음에는, vuepress v1에서 GA4 적용도 스크립트 구문에서 강제로 하였는데, event를 어떻게 해야하지 싶었다.
그래서 GA 사이트에서 다른 이벤트를 주는 방법대로 해보기로 했다.
나는 모달을 여는 버튼을 눌렀을 때의 함수에 아래 코드를 추가해주었다.
gtag('event', 'modal클릭', {
'description': '+버튼을 누른 것 입니다.',
'fatal': false
});
두번째 매개변수는 event의 이름이고,
세번째 매개변수의는 필수는 아니며, description은 이벤트의 설명이고, fatal은 심각한 경우 true, 아닐경우 false이다.
보통 이 경우는, 해당 함수를 실행하고 예외로 처리할 때 사용을 많이 하는 것 같다.
하지만, event를 줄 때에도 같은 방법을 사용하면 될 것 같아서 우선 이렇게 적용을 하였다.
GA에서 확인한 결과 modal 클릭하는 이벤트가 잘 나오는 것을 확인할 수 있었다.