🔥月額$200でTenjinにフルアクセス - 全機能、アドオンなし、いつでもキャンセル可能。 価格と機能を見る

サインアップ
カテゴリーを見る

TikTok for Business Web-to-App設定

4 min read

TikTokイベントマネージャでの設定 #

  • TikTokイベントマネージャにログインします。
  • +をクリックして新しいデータソースを接続します。
  • Webオプションを選択し、Nextをクリックします。
  • ピクセルコードを自分でインストールする場合は、manual setupを選択してください。
  • 接続方法として、Tiktok Pixel + Events APIオプションを選択します。
  • ピクセルに名前を付けます。
  • ランディングページ (内)にベースコードをインストールします。
  • ページの読み込みやクリックなどのイベントを設定するには、手順に従ってください。ランディングページの準備ができたら、これらのイベントを後から設定することもできます。ステップ7では、Pixel IDを保存し、アクセストークンを生成して、さらに設定を進めてください。

ランディングページでの実装 #

  • サンプルコードに従って、ピクセルIDを変更してください。内にTikTokピクセル部分を含め、CVQT4GJC77U89V958HM0をご自身のピクセルIDに更新してください。
JavaScript
<head>
  <!-- TikTok Pixel Code Start -->
  <script>
    !(function (w, d, t) {
      w.TiktokAnalyticsObject = t;
      var ttq = (w[t] = w[t] || []);

      // Define available methods
      ttq.methods = [
        "ページ", "track", "identify", "instances", "debug",
        "on", "off", "once", "ready", "alias", "group",
        "enableCookie", "disableCookie",
        "holdConsent", "revokeConsent", "grantConsent",
      ];

      // Defer method calls until SDK loads
      ttq.setAndDefer = function (t, e) {
        t[e] = function () {
          t.push([e].concat(Array.prototype.slice.call(arguments, 0)));
        };
      };

      for (var i = 0; i < ttq.methods.length; i++) {
        ttq.setAndDefer(ttq, ttq.methods[i]);
      }

      // Create pixel instance
      ttq.instance = function (t) {
        var e = ttq._i[t] || [];
        for (var n = 0; n < ttq.methods.length; n++) {
          ttq.setAndDefer(e, ttq.methods[n]);
        }
        return e;
      };

      // Load the TikTok pixel SDK
      ttq.load = function (e, n) {
        var r = "https://analytics.tiktok.com/i18n/pixel/events.js";
        var o = n && n.partner;

        ttq._i = ttq._i || {};
        ttq._i[e] = [];
        ttq._i[e]._u = r;
        ttq._t = ttq._t || {};
        ttq._t[e] = +new Date();
        ttq._o = ttq._o || {};
        ttq._o[e] = n || {};

        // Inject script tag
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.async = true;
        script.src = r + "?sdkid=" + e + "&lib=" + t;

        var firstScript = document.getElementsByTagName("script")[0];
        firstScript.parentNode.insertBefore(script, firstScript);
      };

      // Initialize with pixel ID and fire page view
      ttq.load("CVQT4GJC77U89V958HM0");
      ttq.ページ();
    })(window, document, "ttq");
  </script>
  <!-- TikTok Pixel Code End -->
</head>

以下の部分をHTMLのbodyに含めてください。必要に応じて編集してください。

JavaScript
<script>
  // Capture URL Parameters
  const urlParams = new URLSearchParams(window.location.search);
  let ttclid = urlParams.get("ttclid") || "";
  let campaign_id = urlParams.get("campaign_id") || "";
  let campaign_name = urlParams.get("campaign_name") || "";
  let creative_name = urlParams.get("creative_name") || "";

  // Function to Handle Download Button Click
  function handleDownloadClick() {
    let trackingURL =
      `https://track.tenjin.com/v0/click/NBoIGJFsXn8oGtlVqtcaL` +
      `?tenjin_parameter_1=${ttclid}` +
      `&redirect=false`;

    let downloadURL = "https://kudoocat.com/puzzlegame.apk";

    // Step 1: Send tracking request silently (no page redirection)
    fetch(trackingURL, { method: "GET", mode: "no-cors" })
      .then(() => {
        console.log("Tracking sent successfully.");
      })
      .catch(() => {
        console.log("Tracking request failed.");
      });

    // Step 2: Directly trigger file download
    window.location.href = downloadURL;
  }

  // Prevent iOS Double-Tap Zoom
  let lastTouchEnd = 0;
  document.addEventListener(
    "touchend",
    function (event) {
      const now = Date.now();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    },
    false
  );

  // Prevent Multi-Touch Gestures
  document.addEventListener(
    "touchstart",
    function (e) {
      if (e.touches.length > 1) {
        e.preventDefault();
      }
    },
    { passive: false }
  );
</script>

トラッキング URL部分については、Tenjinから独自のトラッキングURLを取得してください (下記のTenjin 設定手順を参照してください)。

Tenjin管理画面での設定: #

  • TenjinダッシュボードにTikTok Web-to-Appチャネルを追加します。
  • キャンペーンページでトラッキングURL を生成します。このトラッキングURLはランディング ページに実装する必要があります:

    https://track.tenjin.com/v0/click/NBoIGJFsXn8oGtlVqtcaL?click_id=${ttclid}&redirect=false
  • Tiktok Web-to-Appインストールコールバックをオンにします。
あなたの気持ちは？