동적으로 구글설문지 입력필드에 자동 채워지게 하는 방법

홈페이지를 운영하실 경우 사이트의 오류신고나 사이트가 어떻게 운영되면 좋겠다는 사용자의 의견을 들을 때 구글설문지를 이용하여 설문을 받을 수 있습니다. 사용자의 UserAgent 를 파악하여 어떤 기기에서 사이트를 접속했고 어떤 브라우저를 이용했는데 어떤 오류가 있었는지에 대한 사용자 정보나 GA 에 Client ID 정보, 설문지를 누르기 전의 referrer URL 등을 구글 설문지로 입력 받아온다면 사이트 오류등을 파악하기가 쉬워집니다.

URL 파라메터를 사용하여 동적으로 구글 설문지 입력필드에 자동으로 채워지는 방법에 대해서 알려드리겠습니다.

구글설문지 작성

우선 간단하게 구글설문지를 작성합니다. 이름, 이메일, 자동으로 입력받을 필드는 Referrer URL 과 UserAgent 를 단답형 텍스트로 생성했습니다.

구글 설문지 주소는 아래와 같습니다.

• https://docs.google.com/forms/d/e/1FAIpQLScNOQKZOb24ZN57ohg25r85PxqEhJZmhNtjA4xoDamE9bV9wQ/viewform

URL 파라메터를 이용한 URL 생성

아래의 input field를 개발자 도구 inspect로 선택해보면 아래와 같은 html code 를 확인하실 수 있습니다.

<input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf"
       autocomplete="off" tabindex="0" aria-label="Referrer URL" 
       aria-describedby="i.desc.1561032223 i.err.1561032223" 
       name="entry.1957666217" value="" dir="auto" data-initial-dir="auto" data-initial-value="">

여기에서 확인해야 할 것은 input name 속성값입니다. Referrer URL name 값은 entry.1957666217 이고 UserAgent name 값은 entry.1127047142 입니다.
아래 구글설문지주소와 URL 파라메터를 사용하여 이 주소로 들어가게 되면 동적으로 구글설문지 입력필드에 자동으로 채워지는 것을 확인하실 수 있습니다.

• https://docs.google.com/forms/d/e/1FAIpQLScNOQKZOb24ZN57ohg25r85PxqEhJZmhNtjA4xoDamE9bV9wQ/viewform?entry.1957666217=리퍼러주소&entry.1127047142=유저에이전트

참고문서 : https://trevorfox.com/2015/06/dynamically-pre-fill-google-forms-with-mailchimp-merge-tags/