방법 1: 네이티브 JavaScript SDK 구현 옵션:

Singular 웹 SDK는 웹-앱 포워딩을 위한 두 가지 자바Script 함수를 제공합니다. 구현에 가장 적합한 방법을 선택하세요:

옵션 A: openApp() - 자동 리디렉션

사용자를 앱(또는 앱이 설치되지 않은 경우 앱 스토어)으로 즉시 리디렉션하려는 경우 이 방법을 사용합니다.

// Basic usage - redirect to app with web parameters
singularSdk.openApp("https://mydomain.sng.link/Buour/55cx");

// With deep link to specific content
singularSdk.openApp(
  "https://mydomain.sng.link/Auour/55ba", 
  "product/12345",
  null,
  "product/12345"
);

옵션 B: buildWebToAppLink() - 수동 제어

링크를 구성하되 트리거되는 시기/방법을 제어하려는 경우 이 방법을 사용합니다.

// Build link and assign to button
const webToAppLink = singularSdk.buildWebToAppLink(
  "https://mydomain.sng.link/Buour/55cx"
);

document.getElementById("download-btn").href = webToAppLink;

// Or redirect programmatically
window.location.href = webToAppLink;

방법 2: 구글 태그 관리자 SDK 구현 옵션

웹사이트 코드를 직접 수정하지 않고 웹-투-앱 링크를 관리하려는 경우 GTM 구현이 이상적입니다. 두 가지 접근 방식이 있습니다:

옵션 A: 동적 링크 교체(권장)

웹 SDK가 초기화된 후 페이지의 모든 Singular 링크를 자동으로 업데이트합니다.

1. GTM에서 새 사용자 지정 HTML 태그를만듭니다.
2. 태그 시퀀싱을사용하여 Singular 초기화 태그 이후에 실행되도록 구성합니다.
3. 다음 코드를 붙여넣습니다:

<script>
(function() {
  // Replace with your Web-to-App baselink
  var baseLink = "https://mydomain.sng.link/Auour/55ba";
  
  // Extract optional parameters from URL
  var urlParams = new URLSearchParams(window.location.search);
  var deeplink = urlParams.has('_dl') ? decodeURIComponent(urlParams.get('_dl')) : '';
  var deferredDeepLink = urlParams.has('_ddl') ? decodeURIComponent(urlParams.get('_ddl')) : '';
  var passthrough = '';

  function replaceSngLinks() {
    if (window.singularSdk && typeof window.singularSdk.buildWebToAppLink === 'function') {
      var webToAppLink = window.singularSdk.buildWebToAppLink(
        baseLink,
        deeplink,
        passthrough,
        deferredDeepLink
      );

      if (webToAppLink) {
        // Update all Singular Links on the page
        var links = document.querySelectorAll('a[href*="sng.link"]');
        links.forEach(function(link) {
          link.href = webToAppLink;
        });
      }
    }
  }

  // Run immediately and after 1 second (for dynamically loaded content)
  replaceSngLinks();
  setTimeout(replaceSngLinks, 1000);
})();
</script>

옵션 B: 버튼 클릭 트리거

특정 버튼이 클릭될 때만 웹-투-앱 리디렉션을 실행합니다.

1. GTM에서 사용자 지정 HTML 태그 생성
2. 특정 버튼 클릭 이벤트에서 트리거를 실행하도록 설정합니다.
3. 다음 코드 구조를 사용합니다:

<script>
(function() {
  if (window.singularSdk && typeof window.singularSdk.openApp === 'function') {
    var baseLink = "https://mydomain.sng.link/Auour/55ba";
    var deeplink = '';
    var passthrough = '';
    var deferredDeepLink = '';
    
    singularSdk.openApp(baseLink, deeplink, passthrough, deferredDeepLink);
  }
})();
</script>