Target || 타겟 캠페인에서 개인화 컨텐츠 반응은 확인하고 싶은데 랜딩 페이지는 따로 없을 때 (HTML에서 href 없는 a 태그에 대한 고찰)

 

간혹 다양한 커머스 사이트나 프론트(이하 FO) 서비스의 구조에 따라 커스텀을 하거나
HTML a 태그 목적 자체가 페이지 링크라 사실 주소 없이
<a onclick> 형태로 쓰는 것은 흔하지도 권장하는 바도 아니지만 그럼에도 필요한 경우가 왕왕 있다.

개발자에게는 참을 수 없는 일일 수 있겠으나 비즈니스 편의상 또는 비즈니스 구조상 불가피하게
href 없이 a 태그를 사용하는 경우가 있다. (개발지향점과 서비스 운영의 간극은 이럴 때 나온다)

 

 

이유 1. 
개발 베이스가 없는 현업이 직접 작업 대응을 하는 업무 구조가 존재해 
최대한 변동이 없는 방향으로 구현해야 하기 경우, 리스크를 최대한 줄일 수 있는 표준화된 코드를 공유할 때

이유 2.

a 태그가 dataLayer 등 추가적인 로그 데이터를 일으키는 기능을 담당할 때
이를 테면 타겟 캠페인에서 띠배너 반응(클릭)은 확인하고 싶은데 랜딩 페이지는 따로 없을 때
→ 긴급 공지성으로 캠페인 영역 활용을 하거나 영역(띠배너나 이미지배너, 팝업 등)에 대한 관심도를 선제 파악할 때
   (물론 솔루션을 활용하는 경우 내부 태깅솔루션으로 가능하지만 이질적인 서로 다른 솔루션에 데이터를 수급해야
    하는 상황일 경우 컨텐츠 소재 내에의 HTML 코드를 활용하면 보다 수에 제약 없이 다양한 변형이 가능하다.)

 

우리의 경우는 이 두 가지가 다 해당 되기에
가끔씩 <a href="javascript:void(0);" onclick ~~~> 를 사용하는 상황이 생긴다. 자세한 비교는 아래 코드 참고

 

---

 

 

[* Mo WEB HTML 코드 - 랜딩페이지 있고 웹뷰링크가 별도로 존재하는 경우]

<div style="position:relative; {~~~~원하는 컨텐츠 스타일 적용};">

  <a href="{랜딩페이지 포함 시 주소 입력 부분}"
   onclick="dataLayer.push(
    {
      'event' : 'at_activity',
      'activity_id' : '${campaign.id}',
      'activity_name' : '${campaign.name}'
    }
   );adbWebviewLink('{랜딩페이지 포함 시 주소 입력 부분}');">

  <img src="{이미지파일주소}" style="width:100%;">

  </a>

</div>

 

 

   

[* Mo WEB HTML 코드 - 랜딩 주소는 무효화하고 onclick은 활성화하는 법 ]

-> javascript:void(0); 활용

<div style="{~~~~원하는 컨텐츠 스타일 적용};">

  <a href="javascript:void(0);"
   onclick="dataLayer.push(
    {
      'event' : 'at_activity',
      'activity_id' : '${campaign.id}',
      'activity_name' : '${campaign.name}'
    }
   );adbWebviewLink('{랜딩페이지 포함 시 주소 입력 부분}');">

  <img src="{이미지파일주소}" style="width:100%;">

  </a>

</div>

* Native APP이 아닌 모바일앱 내에 웹뷰 URL을 별도로 가지고 있을 경우는
  appWebviewLink 코드를 추가적으로 넣어줌으로써 보완할 수 있다. 

(참고)  모바일 웹뷰링크 기능 활성화 : Launch에서 Mobile 인입 시 분기처리하는 별도 Function 구현이 필요하다

 

 

 

(이 글을 읽는 분 중 더 좋은 방향의 구현방안이 있으신 분의 피드백 언제나 환영합니다)