[실무적용 CaseStudy] 링크 타고 온 사용자 특정 위치로 이동 시키기

"블랙 프라이데이 세일 광고 배너를 클릭하고 들어 온 유저들을 프로모션 페이지로 이동하게 해주세요!"

 

URL 링크 타고 온 사용자에 대한 컨트롤

 

외부에서 특정 배너광고, 예를 들어 A배너, B배너를 클릭하고 이동해 온 사용자를 구분하여 A페이지와 B페이지로 구분해서 이동시키려면 어떻게 해야 할까요? 알고 보면 아주 간단하지만, 실무에서 자주 발생하는 요구사항 이슈입니다.

예전에도 한 번 이 이슈를 가지고 풀어 간 적이 있었는데, 다시 한번 정리를 합니다.

 

 

매개변수 활용하기

 

URL 주소에는 매개변수(parameter)를 포함시켜서 전송할 수 있습니다.

우리는 알게 모르게 이미 이러한 현상을 자주 목격하고 있습니다. 관심이 없어서 몰랐을 뿐...

 

구글검색에서 강아지를 검색한 결과

 

위, 브라우저 주소창을 가만히 살펴보면, google.com/search?q=어쩌구 저쩌구... 라고 되어 있습니다.

여기서 눈여겨볼 제일 중요한 것은 바로 ?q= 부분입니다.

 

q는 아마도 Query의 약자로 보이는데, q 대신 ?id=abc 등으로 코딩해둔 내용에 맞춰서 단어를 사용할 수 있습니다.

(참고로 파라미터 여러 개는 &로 연결할 수 있습니다. ?id=abc&age=18 과 같은 식으로 말이죠.

 

그렇다면, 다음과 같은 식으로 A 배너를 클릭한 사용자와 B 배너를 클릭한 사용자를 구분할 수 있게 됩니다.

 

<a href="https://yourdomain?bannerID=A">A 배너에 걸린 링크</a>
<a href="https://yourdomain?bannerID=B">B 배너에 걸린 링크</a>

 

프로모션 페이지에서는 접속한 사용자가, A값을 가지고 왔는지, B값을 가지고 왔는지 구분이 가능하다면 어떤 배너를 클릭하고 온 것인지 알 수가 있게 되어 좋지 아니할까요?

그런데 말입니다... 어떻게 하면 그걸 알 수가 있을까요?

 

그런데말입니다...

 

 

URL에서 매개변수 추출하기

 

일단 구글링에서 건진 다음의 코드를 함께 살펴봅시다.

const query = window.location.search;
    console.log(query); // ?bannerID=A

const param = new URLSearchParams(query);
    console.log(param); // URLSearchParams 객체 생성

const id = param.get('bannerID'); URLSearchParams 객체 메소드 get을 이용해서 bannerID값 가져옴. 
    console.log(id);   // A

각각 어떤 결과를 가져오는 지 확인하기 위해, console.log()를 찍어봅니다.

결과적으로 위의 코드 3줄을 모두 실행하면 URL에 함께 뭍어 온 ?bannerID=A 문자열에서 최종적으로 알고 싶었던 A를 획득할 수 있게 됩니다. 오옷... 정말 신기합니다.

 

 

추출한 파라미터 활용하기

 

매개변수(Parameter)를 bannerID 라는 변수에 담았으니, 이제 활용하기만 하면 되겠습니다.

만약 A를 가져 왔으면 A 페이지로 이동하고, B를 가져왔으면 B로 이동하게 해줄 수 있게 됩니다.

 

if (bannerID === "A") {
      document.querySelector("#btnA").click();
    } else {
      document.querySelector("#btnB").click();
    }

 

이와 같은 식으로 A고객은 A버튼을 자동으로 눌리게 했고, 아니라면 B버튼이 자동으로 눌려지게 할 수 있습니다.

버튼을 hidden으로 숨겨 놓으면, 알아서 자동으로 동작되는 것처럼 보이게 될 것입니다.

 

내친 김에 위 조건문을 앞에서 공부했던 삼항 연산자로 변경해보는 것을 복습해 보겠습니다.

 

bannerID === "A" ? document.querySelector("#btnA").click() : document.querySelector("#btnB").click();

 

동작방식을 이해하고 나니, 뭔가 좀 쉬워보이지 않습니까?

1일 1격파! 코딩의 세계로 한 걸음씩 나아가 봅니다.

 

참, 쉽죠?

 

이러한 URL 파라미터 전송에 관해 이해를 하고 있으면, 다양한 응용과 활용이 가능해질 것만 같습니다.

 

즐거운 코딩 생활, 즐코딩.

KINcoding.