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

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

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

inline ad

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

구글설문지 작성

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

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

구글설문지 만들기

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

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

구글설문지 input filed 속성 확인하기
구글설문지 input filed 속성 확인하기
<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://trevorfox.com/2015/06/dynamically-pre-fill-google-forms-with-mailchimp-merge-tags/

RECENT POSTS

[javscript]API 응답에서 키 값들을 검증하는 방법

API 응답에서 다수의 키 값들을 검증할 때 코드의 중복을 줄이는 것은 유지보수성을 향상시키고, 가독성을 높이는 데 중요합니다. 이를 위해 몇 가지 접근 방법을 사용할...

[javscript]특정 키를 제외하고 두 객체를 비교하는 방법

특정 키를 제외하고 두 객체를 비교하는 작업은 데이터의 동등성을 평가하고 싶을 때 유용합니다. Lodash 라이브러리를 통해서 처리할 수 있는 방법에 대해서 살펴보겠습니다. Lodash를 사용한 특정...

[javscript]배열을 특정 키의 값에 따라 정렬하는 방법, _.orderBy

Lodash의 _.orderBy 메소드를 사용하면 배열을 특정 키의 값에 따라 정렬할 수 있습니다. 이 메소드는 배열의 각 항목을 정렬할 기준이 되는 하나 이상의 속성 이름과...

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...