알림톡 카카오 웹 페이지 흰 화면 노출

REST API
#1

문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.

패스오더 id 153780
Test id 1019550

안녕하세요. 패스오더 앱 pm 함선아라고 합니다.
지금 카카오 알림톡을 통해 웹 이벤트 랜딩페이지로 넘겨주고 있는데
다시 재진입을 시도할 경우 간헐적으로 흰 화면으로 노출되고 있습니다.

저희 웹 개발자분께서는 카카오 측에 문의하기로 피드백 주셔서 문의 남깁니다.

알림톡 카카오 웹 페이지 흰 화면 노출
#2

안녕하세요.

확인을 위해 랜딩 URL 공유 부탁드립니다.

#3

빠른 답변 감사합니다!
랜딩 url 자체에 변수가 포함되기는 하나 우선 전달드려봅니다.
https://events-dev.passorder.co.kr/raffle/passtto/aff561fe-41db-4285-9081-e89d2f5eda68/entry

추가로 말씀드리면 위에서는 재진입 시라고 말씀드렸는데, 진입 여부와 상관없이
특정 기기?에서는 빈화면으로 계속 진입되는 케이스가 있습니다.

#4

보유하고 있는 여러 디바이스로 테스트 해 보았는데요
인앱 브라우저내에서 달리 차단하거나 랜더링을 막고 있지 않습니다.

때문에 서비스측 페이지에서 흰 화면을 노출하는 것으로 추정되는데요
회원님께서 보유하신 디바이스로 재현이 되실까요?

#5

제 디바이스로 바로 재현이 가능합니다!

#6

재현되지 않는데요 흰 화면이 표시될 때 주소가 제게 제공해 주신 주소가 맞으실까요?
흰 화면 표시 시 중앙 상단 바를 터치하시면 URL 복사하기 메뉴가 표시됩니다.
해당 메뉴에서 복사한 URL 공유 부탁드립니다.

#7

초기 진입은 보내드린 url이 맞고, 후에 해당 도메인의 / 로 이동되고 흰 화면이 뜨고 있습니다.

#8

안녕하세요.

해당 URL 접근시 재현되지 않아 좀더 확인이 필요해 보입니다.
저희쪽에서 접근 시 패스또 0회차라 표시되지 않고 14회차로 표시되며 정상 표기 됩니다.
여전히 재현되신다면 해당 알림톡을 저희가 받아볼수 있을까요?

#9

안녕하세요 담당자님.

해당 부분에 대해 개발자와 논의하고 확인된 내용을 공유 드립니다.

현재 문제가 발생하는 정보를 상세히 공유 드리고자 합니다.
문제가 발생하고 있는 기종은 iOS이며, 버전은 “17.3.1” 입니다.
카카오톡 버전은 “10.5.4” 이며, 같은 조건에서 다른 디바이스로 테스트 했을 때 동일한 증상이 발생하지 않는 것으로 확인되고 있습니다.

현재 저희가 사용하고 있는 카카오 SDK는 다음과 같이 불러오고 있습니다.(index.html에 head 태그에 작성되었음)
<script src="https://developers.kakao.com/sdk/js/kakao.min.js" id="kakao-min"></script>

구버전인 것은 인지하고 있으나, 신버전으로 마이그레이션을 하는 것은 공수가 많이 발생하여 진행하지 못하는 점 양해 부탁드리겠습니다.

Angular Universal 환경에서 작동하고 있으며, 현재 문제가 발생하는 환경에서 테스트 하였을 때 Kakao.init() 을 진행하지 않을 경우에는 저희 루트 URL로 리다이렉트가 되지 않는 것을 확인하였습니다.(즉 정상동작 되었음.)

Kakao.init()을 진행하게 되면 루트 URL로 리다이렉팅 되고 있으며 혹 스크립트를 불러오는 과정에서 못불러왔는지 테스트 하기 위해 Lazy load 처리하고 스크립트 성공 여부에 따라 Alert를 호출하고 Kakao.init()을 시도해보았습니다.

const existsBundle = document.getElementById(`kakao-min`);
if (existsBundle != null) {
  document.head.removeChild(existsBundle);
}

const scriptElt = document.createElement('script');
scriptElt.id = 'kakao-min';
scriptElt.type = 'text/javascript';
scriptElt.src = 'https://developers.kakao.com/sdk/js/kakao.min.js';

document.head.appendChild(scriptElt);

scriptElt.addEventListener('load', () => {
  if (!Kakao.isInitialized()) {
    Kakao.init(clientId);
    alert('KAKO INIT');
  }
  this.clientId = clientId;
});
scriptElt.addEventListener('error', e => {
  alert('스크립트 로딩 실패');
});

위와 같이 작성하고 문제가 발생하는 디바이스로 들어갔을 때 아무 Alert가 발생하지 않고 있는 것으로 보아 스크립트를 불러오는 과정에서 window.Kakao 에 넣는 과정에서 이슈가 발생하지 않았나 추측하고 있습니다. (다른 디바이스에서는 KAKAO INIT Alert가 정상 호출됩니다.)

문제가 발생하는 디바이스에서 카카오 인앱브라우저가 아닌 사파리, 크롬을 통하여 들어갔을 경우에는 정상적으로 작동하고 있음을 확인하였습니다.

내용 확인 부탁드립니다.

#10

달리 문제가 있어 보이지는 않는데요.
JS SDK의 경우 제공되는 도메인이 변경되어 위 주소 접근 시 아래 주소로 301 리디렉션됩니다.
우선 스크립트 주소를 변경해 보시겠어요?

또한 문제가 지속되시는 경우 번거로우시겠지만 카카오톡 캐시를 삭제하고 다시 확인 부탁드립니다.

https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.min.js
#11

안녕하세요. 빠른 답변 주셔서 감사합니다.

해당 URL로 바꿔서 테스트 해볼 수 있도록 하겠습니다.

해당 부분을 문의하게 된 이유가 다름아닌 유저의 인입이라 그런데, 혹 캐시 삭제를 하게 되면 더는 발생하지 않는 것이 맞으려나요?

확인 부탁드리겠습니다.

감사합니다.

#12

테스트 유저의 디바이스 환경상의 문제가 아니라 일반 유저라면 캐시 삭제가 문제 해소에 도움이 될거라 보이지 않습니다.

톡 인앱에서 흰 화면으로 랜더링 하지 않기에 서비스측 코드에 원인이 있지 않을까 추정하고 있습니다.
메시지를 직접 전달 받아 확인해 보고 싶은데 혹시 해당 알림톡 받을 수 있는 방법에 대해 설명 가능하실까요?

#13

그렇다면 혹시 1666-2276 번호로 '가제개항개울’이라는 단어를 입력해서 전송해봐주실 수 있을까요?

1개의 좋아요