FacebookコンバージョンAPIの設定方法

機能概要

この設定を行うことで、LINEの友だち追加をMeta（Facebook）広告のコンバージョンとして計測することができます。
TalkLabelの流入経路を経由してLINEに友だち追加されたユーザーを、Metaピクセルを通して計測できる仕組みです。

計測を行うためには、以下の条件を満たす必要があります。

1. LINEの友だち追加をコンバージョンポイントとして設定していること
2. TalkLabelの流入経路を使用していること
3. 以下の順番で友だち追加が行われていること
   　　広告 → LP（ランディングページ） → TalkLabelの流入経路 → 友だち追加

事前に準備するもの

• MetaピクセルID
• Metaピクセルのアクセストークン
• 広告で運用しているページ(JSを埋め込みます。)

設定手順

【詳細手順】
STEP1：MetaピクセルIDとアクセストークンを準備する
以下の3点を事前に用意してください。
・MetaピクセルID
・Metaピクセルのアクセストークン
・広告で運用しているページ（※JSを埋め込みます）

STEP2：Facebookコンバージョン設定を開く
TalkLabel管理画面で【チャネル設定】を開き、【Facebookコンバージョン設定】の「設定する」ボタンをクリックします。

STEP3：ピクセル情報を登録する
画面下部の【新規作成】ボタンを押すと、ピクセル登録画面が表示されます。
MetaピクセルIDとアクセストークンを入力し、【作成】ボタンをクリックします。

STEP4：流入経路にピクセルIDを紐づける
【流入経路分析】から、既存または新規の流入経路を開き、
STEP3で登録したピクセルIDを紐づけます。

STEP5：GETパラメータを引き継ぐようページにJSを設置する
LP（広告ランディングページ）上でfbclidパラメータを保持・引き継ぐため、
以下のJSコードをページに埋め込みます。

注意点

デフォルトでは「登録完了」イベントが発火する形になっているので、必要に応じてイベント名は変更をお願いします。

以下から変更可能です。

Metaピクセルの標準イベントに関する記述はこちらから確認できます。

標準イベントコードの「fbq(‘track’, ‘~~’);」の「~~」部分を入力することで登録完了イベント以外も設定可能です。

最後に、LPなど友達追加リンクを貼り付けるページに対してGETパラメータを引き継ぐようにしてください。

例えば、Facebook広告で運用しているページのドメインが talklabel.com というドメインだったとします。

そうすると、Facebook広告で開かれると、以下のような一例になります。

https://talklabel.com?utm_source=facebook&fbclid=hogehoge …..

TalkLabelでコンバージョンAPIを使用する場合には、ここで使用されたfbclid=〇〇という値が必要になります。

流入経路で発行したリンクが最終的に、以下のようになっていることが条件となります。

https://liff.line.me/hogehoge….&fbclid=hogehoge

このようになることで、友達追加をしたタイミングでFacebookのコンバージョンAPIを叩く仕組みとなっています。

以下、LPなどに対して埋め込むJSのコード例

GETパラメータの値がデバイスの影響などによって、うまく取得できないケースがあり、できるだけ正確な値になるように以下のような工夫をしています。

※ TalkLabel外でのページのコードに関しては弊社では責任を負いかねますので、あらかじめご了承ください

<!-- 以下はHTMLファイルに記述する内容。add_param.jsというファイルを別で定義しています。 -->
<script src="./js/add_param.js"></script>
  <script>
    // メイン処理
    (function () {
      // ページロード時にパラメータを処理
      function handleParameters() {
        try {
          // クエリパラメータを取得して保存
          const params = getQueryParams();
          console.log("Main page params:", params);

          // パラメータが存在する場合は保存
          if (Object.keys(params).length > 0) {
            storeParams(params);
            console.log("Parameters stored successfully");
          } else {
            console.log("No parameters to store");
          }

          // すべてのリンクにパラメータを追加
          addParamsToAllLinks();
        } catch (error) {
          console.error("Error handling parameters:", error);
        }
      }

      // DOM読み込み後に実行
      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", handleParameters);
      } else {
        handleParameters();
      }

      // 念のため、ページが完全に読み込まれた後にも実行
      window.addEventListener("load", function () {
        try {
          // 全てのボタンにもイベントリスナーを追加
          const buttons = document.querySelectorAll(".btn-box a");
          buttons.forEach((button) => {
            button.addEventListener("click", function (e) {
              e.preventDefault();
              redirectWithQueryParams(this.href);
              return false;
            });
          });

          console.log("Button event listeners added");
        } catch (error) {
          console.error("Error adding button listeners:", error);
        }
      });
    })();
  </script>

// 以下では、パラメータの値を保持し、URLに飛ばす際に

// Description: Add a parameter to the URL
function getQueryParams() {
  let params = {};
  let search = window.location.search.substring(1); // URLのクエリ部分を取得し、先頭の?を取り除く
  if (search) {
    search.split("&").forEach(function (item) {
      // &で区切られたクエリパラメータを分割
      let parts = item.split("=");
      console.log(parts);
      params[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1] || "");
    });
  }
  console.log(params);
  return params;
}

function storeParams(params) {
  if (!params || Object.keys(params).length === 0) return false;

  try {
    const paramsString = Object.keys(params)
      .map(
        (key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
      )
      .join("&");

    localStorage.setItem("initial_query_params", paramsString);
    sessionStorage.setItem("initial_query_params", paramsString);

    return true;
  } catch (error) {
    console.error("Error storing query parameters:", error);
    return false;
  }
}

// Add parameters to all links on the page
function addParamsToAllLinks() {
  try {
    const links = document.querySelectorAll("a");
    links.forEach((link) => {
      if (link.getAttribute("data-no-params") !== "true") {
        link.addEventListener("click", function (event) {
          event.preventDefault(); // デフォルトのリンク動作を防止
          redirectWithQueryParams(this.href);
        });
      }
    });
    return true;
  } catch (error) {
    console.error("Error adding parameters to links:", error);
    return false;
  }
}

// Redirect to a new URL with query parameters
// Redirect to a URL with parameters
function redirectWithQueryParams(url) {
  try {
    // First check current URL parameters
    const currentParams = getQueryParams();

    // Then check stored parameters if current ones are empty
    let paramsToUse = currentParams;
    let paramSource = "current";

    if (Object.keys(currentParams).length === 0) {
      const storedParamString = getStoredParams();
      if (storedParamString) {
        // Parse the stored parameter string back into an object
        const storedParams = {};
        storedParamString.split("&").forEach(function (item) {
          const parts = item.split("=");
          if (parts.length >= 2) {
            storedParams[decodeURIComponent(parts[0])] = decodeURIComponent(
              parts[1]
            );
          }
        });

        paramsToUse = storedParams;
        paramSource = "stored";
      }
    }

    // Add our own tracking parameter to know where params came from
    paramsToUse._source = paramSource;

    // Construct query string
    const queryString = Object.keys(paramsToUse)
      .map(
        (key) =>
          encodeURIComponent(key) + "=" + encodeURIComponent(paramsToUse[key])
      )
      .join("&");

    // Check if URL already has parameters
    const hasParams = url.includes("?");
    const connector = hasParams ? "&" : "?";

    // Construct final URL
    let finalUrl = url;
    if (queryString) {
      finalUrl = url + connector + queryString;
    }

    console.log("Redirecting to:", finalUrl);
    window.location.href = finalUrl;
  } catch (error) {
    console.error("Error redirecting with parameters:", error);
    // Fallback to original URL if there's an error
    window.location.href = url;
  }
}

function initializeParamHandling() {
  try {
    console.log("Initializing parameter handling");

    // Get parameters from URL
    const params = getQueryParams();

    // Store parameters if they exist
    if (Object.keys(params).length > 0) {
      storeParams(params);
    }

    // Add parameters to all links
    addParamsToAllLinks();

    return true;
  } catch (error) {
    console.error("Error initializing parameter handling:", error);
    return false;
  }
}
// Export functions to window object
window.getQueryParams = getQueryParams;
window.storeParams = storeParams;
window.getStoredParams = getStoredParams;
window.setCookie = setCookie;
window.getCookie = getCookie;
window.redirectWithQueryParams = redirectWithQueryParams;
window.addParamsToAllLinks = addParamsToAllLinks;

// Run initialization when document is ready
document.addEventListener("DOMContentLoaded", initializeParamHandling);