Search

[공지] Google 업데이트로 인한 결제 연동이슈 공지

5 more properties
목차
안녕하세요, 아임포트 고객지원팀입니다.
금일 2022년 08월 29일부터 진행된 Google Analytics 업데이트로 인하여 결제창 연동 이슈가 확인되어 상세 내용 공지드립니다.
현재 아임포트에서는 보다 빠른 이슈 해결을 위해 구글 이슈를 우회할 수 있는 작업(핫픽스 배포)을 완료(31일 20시 경) 하였으며 캐시삭제 후 재 시도하셔서 정상화 여부를 확인해주시기 바랍니다.
이슈와 관련한 상세내용은 아래의 내용을 자세히 참고 부탁드립니다.
추가 확인된 내용
해당 이슈는 아임포트 뿐만 아니라 그 외 웹서비스 사용자들에게도 동일한 영향을 받은 것으로 확인되었으며 (참고1, 참고2) 아임포트에서 내부적으로 구글에 문의한 결과, 구글에서도 문제를 인지하여 09월 01일 09시 00분에 Google Tag Manager js SDK에 패치를 추가한 것으로 확인되었습니다. (참고: Google 답글)
//before function(){var c=this,d=!0;vy(c,function(){d&&b.call(c)},!1,xy(c))&&(b.call(c),d=!1)} //after function(){var c=this,d=!0,e=function(){d&&b.call(c)};Fx(c,e,!1,Cx(c))?(b.call(c),d=!1):Ex(!1,e)}
JavaScript

1. Google Analytics 이슈 요약

원인 : Google Analytics의 javascript SDK 업데이트가 prototype pollution으로 일부 웹사이트들의 오동작을 유발함
현상 : 모바일환경에서 일부 PG사들의 결제 SDK가 영향을 끼쳐 결제창이 호출되지 않음
참고 : 아임포트 SDK 뿐만 아니라 PG사의 SDK로 직접 연동한 경우에도 동일하게 발생할 수 있음
대응방법
1.
Google Analytics javascript SDK 비활성화를 통한 문제 해결 가능
2.
Google Analytics 버그 우회하는 핫픽스(긴급배포) 익영업일 내 반영예정 (현재 GTM 이슈를 우회할 수 있는 대응 작업 진행중)

2. Google Analytics 이슈 상세

구글에서 2022년 8월 29일 Google Analytics의 javascript SDK를 업데이트하였습니다. 이 업데이트는 한번에 모든 유저를 대상으로 적용된 것은 아니고, 일부 유저들에게 선 적용되면서 천천히 rolling update 되었습니다.
위 업데이트로 인해 구글이 HTMLFormElement 객체의 prototype을 고쳐서 (prototype pollution), 기존에는 synchronous 함수였던 HTMLFormElement.prototype.submit 함수가 asynchronous로 바뀌어 버렸습니다.
HTMLFormElement.prototype.submit = function() { /* ... */ };
JavaScript
이로 인해 많은 웹사이트들의 javascript 동작에 영향을 미쳤으며, 아임포트의 결제 SDK도 영향을 받았습니다.
form.submit() foo() // GA 업데이트 전: submit(), Form submit 발생, foo() 함수 호출 순서대로 실행됨 // GA 업데이트 후: submit(), foo() 함수 호출, Form submit 발생 순서대로 실행됨 // 구글의 GTM 업데이트가 기존 동작을 깨서, 아래와 같이 고쳐야함 form.addEventListener('submit', _ => { foo() }) form.submit()
JavaScript

3. Google Analytics 비활성화 방법

빠른 해결을 원하시는 경우 Google Analytics javascript SDK 비활성화로 이슈상황 해결이 가능하시나, 다만 Google Analytics 외에도 Google Tag Manager, Google Optimize 등 Google Analytics와 연동된 모든 js SDK를 비활성화 하셔야 Google Analytics가 비활성화되는 점 참고 부탁드립니다.

3.1. Google Analytics

Google Analytics 4 (gtag.js)를 사용하시는 경우, 추가되어있는 아래 태그들을 찾아 주석처리하시면 비활성화 됩니다.
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); </script>
HTML
Universal Analytics (gtag.js)를 사용하시는 경우, 아래 태그를 찾아 주석처리하시면 비활성화됩니다.
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){window.dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_TRACKING_ID'); </script>
HTML
Universal Analytics (analytics.js)를 사용하시는 경우, 아래 자바스크립트를 찾아 주석처리하시면 비활성화됩니다.
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-Y', 'auto') ga('send', 'pageview')
JavaScript
추가로 이 외에도 아래와 같이 Google Tag API나 Google Analytics API를 별도로 사용하는 코드가 존재할 경우, 오작동을 막기 위해 아래 부분도 주석처리 해주셔야 합니다.
// Google Tag API 사용 예시 gtag('set', {'experiments': [{'id': '$experimentId', 'variant': '$variationId'}]}) gtag('event', 'screen_view', { 'app_name': 'myAppName', 'screen_name': 'Home' }) // Google Analytics API 사용 예시 ga('set', 'exp', '$experimentId.$variationId') ga('set', 'exp', 'EXP1_ID.1!EXP2_ID.2-0-1!EXP3_ID.2')
JavaScript

3.2. Google Tag Manager

Google Tag Manaer를 설치하실 때에 구글에서 아래 사진의 <script>, <iframe> 태그를 <head>, <body> 태그 안에 삽입하도록 안내하고 있는데, 이 태그들을 주석처리해주시면 GTM js SDK를 비활성화되어 결제가 다시 정상화됩니다.
위 사진은 Google에서 GTM 사용을 위해 제공하는 <script>, <iframe> tag 설정 가이드입니다. 위와 tag들을 모두 주석처리 혹은 제거해주셔야 합니다.
위 태그 외에도 아래와 같이 GTM이 제공하는 js API를 호출하는 부분이 페이지 내에 존재한다면, 이 부분들도 함께 주석 처리해주셔야 합니다.
gtag('event', 'experiment_impression', { /* ... */ }); gtag('event', 'signup_form_complete', { /* ... */ });
JavaScript
위와 같이 custom하게 gtag를 활용하시는 부분도 주석처리 혹은 제거가 필요합니다.

3.3. Google Optimize

optimize.js (sync)를 설치하신 경우, 아래의 태그를 찾아 주석 처리해주셔야 합니다.
<script src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>
HTML
optimize.js (async)를 설치하신 경우, 아래의 태그를 찾아 주석 처리해주셔야 합니다.
<script async src="https://www.googleoptimize.com/optimize.js?id=OPT_CONTAINER_ID"></script>
HTML
Optimize를 Google Tag Manager를 통해 설치하신 경우 위의 “3.2. Google Tag Manager” 안내에 따라 Google Tag Manager js SDK를 비활성화 해주셔야 합니다.
optimize.js와 함께 anti-flicker snippet을 설치해주신 경우, 아래의 anti-flicker snippet도 찾아 함께 주석 처리해주셔야 합니다.
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'CONTAINER_ID':true});</script>
HTML
상기 기술된 Google Tag Manager, Google Optimizer 외에도 Google Analytics와 연동 되어있는 Google의 서비스라면 같은 이슈가 발생될 수 있습니다.
위 내용들을 기반으로 모든 주석처리를 마친 후에도 같은 문제를 겪으시는 경우 Google 관련 태그 및 코드들을 모두 주석 처리 해주셔야 하는 점 참고 부탁드립니다.