스위트 알럿(Sweet Alert) 사용해서 팝업 광고 띄우기 + 쿠키(Cookie) 사용하기

이번에 프로젝트에서 쿠키를 어떻게 적용할지 고민하다가 강사님께서 스위트 알럿으로 광고를 띄우고 쿠키로 하루 보지 않기를 적용해보면 좋겠다고 조언해주셔서 한번 프로젝트에 적용시켜 보았다.

 

먼저, 스위트 알럿을 사용하기 위해서 cdn 방식으로 jsp에 추가해주었다.

 

다른 요소들이 모두 로드된 후에 사용하기 위해 뒤쪽에 선언했다.

 

Sweet Alert 사이트에 들어가면 예시들을 확인할 수 있고, 거기에서 맘에 드는 예시를 가져다가 이용하면 된다.

https://sweetalert.js.org/

SweetAlert

 

나는 광고 사진을 넣을 예정이라서 이미지가 들어가는 예시를 가져와 내가 사용하고 싶은 방식대로 수정해서 사용하였다.

---

window.addEventListener("load", function () { // 페이지 요소 로딩 후에 실행함
  if (!getCookie("advertiseCookie")) { 
		// 쿠키가 존재하지 않을 때 광고 띄우기
	  Swal.fire({
		title: '오늘의 꿀조합 추천! \n 부대찌개 컵라면', // 광고 제목
		html: '오모리김치찌개컵라면 + 볶음김치 + 햄<br>= 감칠맛 폭발! 든든한 한끼 식사', // 광고 내용
      imageUrl: 'assets/img/comboProduct/30000.png', // 이미지 경로 
      imageWidth: 300,   // 이미지 크기 조정
      imageHeight: 300,
      imageAlt: '문세윤 부대찌개 컵라면 레시피', // 이미지 설명
      showCancelButton: true, // 취소 버튼 표시
      confirmButtonText: '제품 보러 가기', // 확인 버튼
      cancelButtonText: '하루 동안 보지 않기', // 취소 버튼
    }).then((result) => {
    	// 만약 확인버튼을 눌렀다면 해당 제품 상세페이지로 이동
      if (result.isConfirmed) {
		window.location.href = 'productDetail.do?productComboNumber=30000'; 
		// 해당 제품의 상세 정보 페이지 이동
        // 하루동안 보지 않기 눌렀을 때 쿠키 저장하여 1일동안 광고 보지 않기
      } else if (result.dismiss === Swal.DismissReason.cancel) {
 		// 만료일
    	  const expires = new Date();
        expires.setDate(expires.getDate() + 1); // 현재 시각 + 1일 뒤 만료일 설정
        document.cookie = "advertiseCookie=true; expires=" + expires.toUTCString() + "; path=/";
 		// 쿠키 저장 
 		// 사이트 전체에서 쿠키 적용 가능하도록 설정
      	}
    });
  }
});

이벤트 리스너를 통해 광고를 실행시킨다.

스위트 알럿을 사용할 때는 alert 대신 swal 을 사용하여 작성한다.

 

swal 안에는 광고 제목과 내용, 이미지 설정 등을 넣어준다.

이미지는 프로젝트에 들어있는 이미지로 설정하여, 제품 보러 가기 버튼 클릭 시 해당 상품의 상세 페이지로 이동하도록 구현했다.

 

else if 안쪽은 "하루 동안 보지 않기"를 눌렀을 때 쿠키를 저장하는 코드이다.

 

우선 이처럼 스위트 알럿을 띄우면 

 

 

해당 화면처럼 스위트 알럿이 나타나고, '하루 동안 보지 않기' 버튼을 누르면 쿠키를 저장해 하루동안 쿠키가 뜨지 않도록 설정하기 위해 쿠키 코드를 작성했다.

---

// 쿠키 가져오는 함수
function getCookie(name) {
  const value = "; " + document.cookie; // 쿠키 문자열 파싱
  const parts = value.split("; " + name + "="); // 쿠키 이름 분리
  if (parts.length === 2) return parts.pop().split(";").shift(); // 쿠키 값만 반환
}

위 코드는 쿠키를 가져오는 함수로, 문자열을 파싱해서 어떤 쿠키인지 가져온다.

 

그리고 위에  else if 문 안의 코드처럼, 만료일을 설정하고 쿠키를 저장하여 하루동안 해당 스위트 알럿이 뜨지 않도록 했다.

 else if (result.dismiss === Swal.DismissReason.cancel) {
 		// 만료일
    	  const expires = new Date();
        expires.setDate(expires.getDate() + 1); // 현재 시각 + 1일 뒤 만료일 설정
        document.cookie = "advertiseCookie=true; expires=" + expires.toUTCString() + "; path=/";
 		// 쿠키 저장 
 		// 사이트 전체에서 쿠키 적용 가능하도록 설정
      	}

 

코드를 모두 작성하고 하루동안 보지않기 버튼을 눌러 테스트 해본 결과

F12로 확인했을 때 쿠키 저장일 하루로, 잘 저장되어 있는 모습을 확인할 수 있었다!

 

참고로 광고 팝업도 main.jsp에 선언!