티스토리 블로그에 쿠팡 파트너스 다이나믹 배너 추가하기

티스토리 블로그에 쿠팡 파트너스 다이나믹 배너 추가하기

안녕하세요. 파파대니입니다.

지난번에는 쿠팡 파트너스 가입 및 광고 넣는 방법에 대해 알아보았습니다.

이번에는 티스토리 블로그의 사이드바와 글 본문 상/하단에 쿠팡 파트너스 다이나믹 배너를 추가하는 방법을 정리해 보겠습니다.

아직 쿠팡 파트너스 가입을 하지 않으셨다면, 쿠팡 파트너스 시작하기 글을 먼저 읽어주세요.

 

1. 쿠팡 파트너스 다이나믹 배너 만들기

쿠팡 파트너스 사이트의 '링크 생성' 메뉴에서 '다이나믹 배너'를 클릭해 다이나믹 배너 설정 페이지로 들어갑니다.

 

배너 생성 버튼을 클릭해서, 배너 생성을 진행해 주세요.

상/하단 배너와 사이드바 배너, 총 2개의 배너를 생성해야 합니다.

 

1) 상/하단 배너 만들기

 

• 배너 제목에 적절한 이름을 입력하고, 배너 타입은 '고객 관심 기반 추천'을, 배너 데이터는 '추천 상품 피드'를 선택하세요.
• 크기 조정에서는 본문 상/하단 배너에 맞춰 너비 100%, 높이 150으로 설정하고 배너 만들기를 클릭하세요.
• 생성된 코드가 하단에 표시되니, 해당 코드를 저장해 둡니다. (사이드 배너 추가 시 사용됩니다.)

 

2) 사이드 배너 만들기

 

• 배너 제목에 적절한 이름을 입력하고, 배너 타입은 '고객 관심 기반 추천'을, 배너 데이터는 '추천 상품 피드'를 선택하세요.
• 크기 조정에서는 사이드바 크기에 맞춰 너비 300, 높이 300으로 설정하고 배너 만들기를 클릭하세요.
• 배너 만들기를 클릭한 후, 생성된 코드에서 id와 trackingCode 값을 따로 저장해 둡니다. (본문 아래쪽 코드 참고)

 

---

2. 블로그에 쿠팡 파트너스 다이나믹 배너 설정

1) 사이드바 배너 추가

사이드바 배너를 추가하기 위해서는 티스토리 블로그에서 제공해 주는 플러그인의 배너 출력을 사용하기로 설정해야 합니다.

현재 사용 중이 아니라면, 관리자 화면 플러그인탭에 배너출력을 사용하기로 변경해 주세요.

 

• 관리자 사이드바에서 HTML 배너 출력에 +를 클릭 후 광고가 출력될 위치에 배치합니다.
• 그리고 배치한 배너출력에 마우스 커서를 올려서 편집을 눌러주세요.
• 편집창이 출력되면, 적절한 이름과 HTML 소스를 붙여 넣고 확인 버튼을 클릭합니다.
• 사이드바에 배치된 배너 이름이 변경된 것을 확인 후 변경사항 저장 버튼을 클릭해 주세요.

 

2) 본문 상/하단 다이나믹 배너 추가

본문 상/하단에 넣기 위해서는 스킨 편집에서 HTML를 편집해야 합니다.

관리자 화면 스킨편집에 HTML 편집으로 진입해 주세요.

 

 

• 본문 내에서 상/하단에 배치해야 하기 때문에 본문의 위치를 찾는 것이 중요합니다.
• 저는 F12 개발자도구를 실행해서 본문의 위치를 찾아보고, 코드 수정 후 미리보기를 통해서 테스트 진행 하였습니다.
• 그렇게 테스트하면서 본문의 위치를 찾았으며, 오디세이 스킨의 경우 _article_rep_desc_이였습니다.
• 본문 코드 위/아래로 쿠팡 다이나믹 배너 코드를 넣고, 미리보기를 통해서 확인하였습니다.

제가 사용한 코드는 다음과 같으며, 코드에서 id와 trackingCode 값을 본인의 것으로 바꾸어 적용하세요.

주의 사항:  아래 코드 중 id 1234567 변경은 2곳이며, trackingCode A1234567 변경은 1곳입니다.

<div>
  <br />
  <div class="flex flex-col gap-y-1" style="solid #e5e5e5;height:150px"> 
    <div>
      <script src="https://ads-partners.coupang.com/g.js"></script>      
      <script>
        new PartnersCoupang.G({          
          "id":1234567,          
          "template":"carousel",          
          "trackingCode":"A1234567",          
          "width":"100%",          
          "height":"150"        
        });        
        try {          
          setTimeout(function() {           
          var iframeNode = document.querySelector('iframe[id^="1234567"]');          
          document.querySelector('.searchP-ad').appendChild(iframeNode);          
          }, 1000);      
        } catch (e) {     
          console.error(e);        
        }      
      </script>    
    </div>
  </div>
  <span class="coupang-notice">* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</span>
</div>

---

3. 쿠팡 파트너스 광고 출력 확인

메인 화면에서 확인해 보면, 사이드바에 광고가 출력되는 것을 확인할 수 있습니다.

 

 

아무 글에 들어가서 보면, 본문 상/하단에 광고가 잘 출력되는지 확인하세요.

---

쿠팡 파트너스 가입 후 처음으로 블로그에 광고를 배치해 보았습니다.

이 글이 여러분의 광고 설정에 도움이 되길 바라며, 앞으로도 유용한 정보로 찾아뵙겠습니다.

감사합니다.

 

 

⬇️ 참고하면 좋은 글 ⬇️

 

티스토리 블로그 쿠팡 파트너스 시작하기

티스토리 블로그 쿠팡 파트너스 시작하기