목차
안녕하세요, 아임포트 고객지원팀입니다.
금일 2022년 08월 29일부터 진행된 Google Analytics 업데이트로 인하여 결제창 연동 이슈가 확인되어 상세 내용 공지드립니다.
현재 아임포트에서는 보다 빠른 이슈 해결을 위해 구글 이슈를 우회할 수 있는 작업(핫픽스 배포)을 완료(31일 20시 경) 하였으며 캐시삭제 후 재 시도하셔서 정상화 여부를 확인해주시기 바랍니다.
이슈와 관련한 상세내용은 아래의 내용을 자세히 참고 부탁드립니다.
•
추가 확인된 내용
//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를 비활성화 해주셔야 합니다.
•
<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 관련 태그 및 코드들을 모두 주석 처리 해주셔야 하는 점 참고 부탁드립니다.
