STRA

https://example.com 443 포트로 접근 시, gateway 에서 nginx 80 포트로 맵핑 해주는 설정.

nginx 에 SPA 관련 설정(vue or react or etc...)을 함

server {
    listen 80;

    location / {
        alias  /usr/share/nginx/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html = 404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html/dist;
    }
}

문제점

https://example.com 으로 접속을 시도했는데, http://example.com/ 으로 301(Moved Permanently) redirect 처리됨

https://example.com/ 으로 slash 를 추가해서 요청하면 문제가 없음

해결

nginx config 에 아래 옵션을 추가(nginx 1.11.8 버전 이상)

absolute_redirect off;

수정 후 config

server {
    listen 80;
    absolute_redirect off; # 추가

    location / {
        alias   /usr/share/nginx/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html = 404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html/dist;
    }
}

나는 1.11.8 버전 이상이라 위의 내용으로 해결됐지만, 1.11.8버전 미만인 경우는 아래 링크의 답변을 참고해서 수정해보길..

https://serverfault.com/questions/905657/nginx-redirects-to-http-after-port-in-redirect-off

npm update --force

명령어 날린 후 작동 확인

페이지에 user_id를 수집하도록 설정을 했는데,

브라우저 콘솔을 통해 https://www.google-analytics.com/collect 요청을 확인했을 때,

Query String Parameters에 uid 항목이 없다면 설정이 잘못된 것이다.

검색을 통해 아래 페이지에 도달했다.

https://webmasters.stackexchange.com/questions/110654/gtag-user-id-tracking-not-working

분명 설정을 잘한 것 같은데, 수집이 안된다는 것이다.

질문자가 자답을 통해 남긴 해결 내용은 페이지뷰 이벤트가 전달되기 전에 user_id 를 설정해야 한다는 것이다.

예를 들어,

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-X');
gtag('set', {'user_id': 'TEST_USER_ID'});

위와 같이 설정한 경우에 통계 파라미터를 보자.

이제 순서를 변경해보자.

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('set', {'user_id': 'TEST_USER_ID'}); // 순서 변경
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-X');

결과는?