카카오 링크 커머스 메시지 영역 문의

mindev · 7월 26, 2021, 5:02오전

31 PM

안녕하세요.
무더운 여름 개발하시는 개발자분들 모두 고생 많으십니다 !

카카오 링크 커머스 관련하여 문의 드립니다.

첨부한 이미지의 동그라미 부분을 클릭 시 content obj 의 link 로 이동되게는 못하나요 ?
첨부한 이미지의 동그라미 친 영역은 크게 보면 상품가격의 영역이지만 텍스트가 없는 빈 영역이며 hr 태그 비슷한 선 위 쪽을 클릭하면 설정하지도 않은 링크로 이동되어 문의 글 남깁니다.

예를 들어 link 가 https://naver.com/shop/?idx=1 이라고 가정하면 해당 영역을 클릭하면 https://naver.com 으로 이동되고 있습니다. 카카오 개발 문서를 읽어봐도 해당 관련 내용은 없고 해당 설정을 어디서 하는지 궁금합니다.

상품가격을 클릭하면 아무런 액션이 없지만 상품영역의 빈 영역을 클릭하면 이동됩니다.

카카오 링크 개발 문서 : https://developers.kakao.com/docs/latest/ko/message/message-template#commerce

감사합니다 !

tim.l · 7월 26, 2021, 5:11오전

안녕하세요~

유사한 문의 사례가 있는데요.

아래 답변 참고하셔서 메시지 템플릿으로 해결해보시겠어요?

https://devtalk.kakao.com/t/commerce/117045/8?u=tim.l

mindev · 7월 26, 2021, 6:16오전

안녕하세요 @tim.l 님.

유사한 문의 사례가 있었군요! 해당 포스팅은 보지 못했는데 감사합니다.

확인 후 추가 문의사항이 있어 답글 남깁니다.

@holden.joo 님이 포스팅에 댓글 남겨주신 “'공통링크’와 ‘기타’ 탭의 출처링크에서 원하시는 도메인을 선택하시고 subpath를 입력하시면 됩니다.” 이 부분이 이해가 잘 가지 않습니다.

우리는 각 각 링크가 다른 쇼핑몰에 공유하기 버튼을 붙였습니다. 그러나 ‘공통링크’ 와 ‘기타’ 탭의 출처링크는 하나의 url 만 가능한 것으로 보입니다.

또한 메시지 템플렛에서 커머스를 사용하고 있으며 해당 영역에 url 을 넣고 싶은데 https://developers.kakao.com/docs/latest/ko/message/js-link#custom-template-msg 해당 문서에서는 찾아볼 수 없습니다.

추가 도움을 주실 수 있으실까요 ?

tim.l · 7월 26, 2021, 7:22오전

아래와같이 해보시겠어요?

스크립트에 templateId와 templateArgs를 설정합니다.

            Kakao.Link.sendCustom({
                templateId: 57826,
                templateArgs: {
                    'title': '제목 영역입니다.',
                    'description': '설명 영역입니다.',
                    'path':'product'
                }
            });

커머스 템플릿으로 메시지 내용을 구성합니다.
기타 링크 path 항목에 templateArgs를 설정합니다.
메시지를 발송해서 출처와 공백영역 클릭해보시면 설정된 경로로 이동되는 것을 확인할 수 있습니다.

mindev · 7월 26, 2021, 7:54오전

안녕하세요 ! 답변 남겨주신 대로 해보고 있습니다 !
sendCustom 의 templateArgs 에는 buttons 추가가 불가능한건가요 ?
createCustomButton 를 사용해야 하는건가요 ?

답변 매우 감사드리며, 개발에 진전이 있습니다.
정말 감사드립니다.

현재는 sendDefault 로 아래의 값을 날리고 있습니다.

{
"content": {
    "title": "테스트상품",
    "description": "",
    "imageUrl": "https://via.placeholder.com/150/FFFF00/000000?Text=test",
    "imageWidth": 300,
    "imageHeight": 200,
    "link": {
        "mobileWebUrl": "https://naver.com/shop_view/?idx=303#review_detail",
        "webUrl": "https://naver.com/shop_view/?idx=303#review_detail"
    }
},
"buttons": [
    {
        "title": "구매하기",
        "link": {
            "mobileWebUrl": "https://naver.com/shop_view/?idx=303#review_detail",
            "webUrl": "https://naver.com/shop_view/?idx=303#review_detail"
        }
    }
],
"commerce": {
    "regularPrice": 50000
},
"objectType": "commerce",
"installTalk": false,
"throughTalk": true

}

해당 값을 만족하며 출처와 공백영역을 클릭하면 설정된 경로로 이동되게 개발을 하고 싶습니다.

하지만 알려주신 방법으로도 어려움을 겪고 있습니다.

죄송하며 도움에 감사드립니다.

tim.l · 7월 26, 2021, 9:21오전

메시지 템플릿 ID를 설정하시면, 메시지 템플릿을 우선 표기합니다.

여기에 templateArgs로 필요한 부분만 스크립트에서 받는 형태로 사용하시면 될것 같습니다.
(공통링크 및 기타링크에 동일하게 설정하시면 됩니다.)

기재해주신 스크립트를 아래와 같이 구현해봤습니다.

            Kakao.Link.sendCustom({
                templateId: 57826,
                templateArgs: {
                    "title": "테스트상품",
                    "imageUrl": "https://via.placeholder.com/150/FFFF00/000000?Text=test",
                    "btn_title": "구매하기",
                    'path':'shop_view/?idx=303#review_detail',
                    "regularPrice": 50000
                }
            });

tim.l · 7월 26, 2021, 9:21오전

mindev · 7월 26, 2021, 9:54오전

늦은 시간까지 답변 주셔서 감사합니다 @tim.l 님.

출처 링크는 DOMAIN/PATH 형식으로
만약 도메인이 https://naver.com 이고 path 로 shop_view/?idx=303#review_detail 값이 넘어온다면
https://naver.com/shop_view/?idx=303#review_detail 로 이동 되는게 맞을까요 ?

한가지 궁금한 사항이 있습니다.
도메인이 여러개 (임대형 쇼핑몰) 의 경우 출처링크의 DOMAIN 은 어떻게 하면 될까요 ?
어떤 식으로 개발 방향을 잡아야할 지 잘 모르겠습니다.

만약 A 쇼핑몰의 링크가 https://daum.net 이고
B 쇼핑몰 링크가 https://kakao.com 이라고 가정하 출처링크의 DOMAIN 은 https://kakaocorp.com 으로 설정을 하면

A 쇼핑몰, B 쇼핑몰 전부 https://kakaocorp.com/shop_view/?idx=303#review_detail 으로 링크가 생성되는 걸까요 ?

답변 정말 감사드립니다.

tim.l · 7월 26, 2021, 10:03오전

출처 링크는 DOMAIN/PATH 형식으로
만약 도메인이 https://naver.com 이고 path 로 shop_view/?idx=303#review_detail 값이 넘어온다면
https://naver.com/shop_view/?idx=303#review_detail1 로 이동 되는게 맞을까요 ?

네, 맞습니다.

한가지 궁금한 사항이 있습니다.
도메인이 여러개 (임대형 쇼핑몰) 의 경우 출처링크의 DOMAIN 은 어떻게 하면 될까요 ?
어떤 식으로 개발 방향을 잡아야할 지 잘 모르겠습니다.
만약 A 쇼핑몰의 링크가 https://daum.net 이고
B 쇼핑몰 링크가 https://kakao.com 이라고 가정하 출처링크의 DOMAIN 은 https://kakaocorp.com 으로 설정을 하면
A 쇼핑몰, B 쇼핑몰 전부 https://kakaocorp.com/shop_view/?idx=303#review_detail 으로 링크가 생성되는 걸까요 ?

우선, 출처와 처음 문의주신 공백영역은 동일 링크가 적용됩니다.

DOMAIN은 디벨로퍼스에 등록한 도메인 중 하나를 메시지 템플릿에서 선택하는 것입니다.

내 애플리케이션>앱 설정>플랫폼 : 사이트 도메인

임대형 쇼핑몰의 개념을 이해 못했는데요.
2개의 사이트가 동일한 쇼핑몰 솔루션을 도메인만 다르게 공유하는 개념인가요?

만약 그렇다면 도메인 별로 하래 스크립트와 메시지 템플릿을 각각 등록해서 호출하시면 될 것 같습니다.

Kakao.Link.sendCustom({
                templateId: 57826,
                templateArgs: {
                    "title": "테스트상품",
                    "imageUrl": "https://via.placeholder.com/150/FFFF00/000000?Text=test",
                    "btn_title": "구매하기",
                    'path':'shop_view/?idx=303#review_detail',
                    "regularPrice": 50000
                }
            });

mindev · 7월 26, 2021, 10:16오전

네, 여러개의 쇼핑몰을 도메인만 각각 다르게 설정하고자 합니다.

하지만 sendCustom 의 path 는 DOMAIN/path 로 이동하여 여러개의 A,B … 쇼핑몰에는 적용이 불가능할 것 같습니다.

또한 말씀 주신 것 처럼 2개의 쇼핑몰이 아닌 100개가 넘어 템플릿을 각각 생성하여 사용하기 어려울 것 같습니다.

다른 방법으로 사용할 수는 없을까요 ?

감사합니다.

tim.l · 7월 26, 2021, 10:58오전

여러개의 쇼핑몰이 동일한 디벨로퍼스앱을 사용하나요?

예를들어 제가 확인할 수 있는 사이트가 있을까요?

출처 링크는

메시지 템플릿을 사용하는 경우 기타 탭에서 수정하고
커스텀 방식 스크립트를 사용하는 경우 도메인 설정 첫번째 링크로 이동하는데요.
동일한 앱을 사용하신다면 출처명은 100개의 사이트 모두 동일하게 표시될 것 같아요.

카페 24와 같이 쇼핑몰 별로 디벨로퍼스앱을 각각 두지 않는다면 원하시는 형태의 구현은 어려워보이긴하네요.

예시 사이트 몇개 알려주시면 추가 확인해보겠습니다.

mindev · 7월 26, 2021, 11:15오전

네 안녕하세요! 여러개의 쇼핑몰에서 동일한 앱을 사용합니다.

예시 사이트를 메시지로 전송해드려도 될까요 ?

tim.l · 7월 26, 2021, 11:21오전

넵 디벨로퍼스 앱ID와 도메인 메시지로 전달 부탁드려요~

앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다~
ex) 123456

mindev · 7월 26, 2021, 11:26오전

메시지 드렸습니다. 늦은 시간까지 문의 답변해주셔서 감사합니다.