免寫CODE一鍵快速部署Facebook的轉換API與傳送需要的事件

2022/06/10

　　先前曾分享過Facebook轉換API的作法，分別有透過WordPress與官方所提供的Conversions API Gateway，透過一鍵快速部署到AWS的E2主機中，完全不用寫任何的程式碼，就能快速的將Facebook的轉換API給建立起來，雖然說透過Facebook官方所提供的Gateway方式，是最簡單且快速的，但唯一讓梅干覺得比較不親民的是主機的費用，一個月下來將近約3000元台幣。　

因此那天梅干在尋找相關的解決辦法時，無意間發現有位國外的網友，佛心的分享整個轉換API的編碼，且還將它釋放出來，同時只要將的碼拷貝後，再把權杖、像素ID給替換後，再依自己所需的事件，進行傳送後，立即就可完成Facebook轉換API的設定，同時也不需要寫任何的CODE，因此要怎麼來進行部署，現在也一塊來看看吧！

Pipedream

註冊帳號：https://pipedream.com/auth/signup
FB轉換API：https://pipedream.com/@mrlevyelad/facebook-capi-p_5VClYz2

Step1
首先在註冊完Pipedream後，再點FB轉換API的連結，接著點右上的Copy鈕。

Step2
在把剛剛的碼複製到自己的專案底下後，這邊有三個參數需要作修改，分別為token、pixelID、事件測試碼。

Step3
接著進入Facebook的事件管理器後，點一下設定，再點產生存取權杖。

Step4
將輸入框中的碼複製起來。

Step5
接著複製像素編號。

Step6
再切到測試事件頁籤，複製測試事件編碼。

Step7
再回到Pipddream後，將剛剛複製起來的碼，將token、pixel_id、event_code給替換掉，換完後記得按下Save。

Step8
接著再按DEPLOY部署。

Step9
在部署完畢後，將上方的連結複製起來。

Step10
開啟網頁輸入下方的程式碼，輸入完畢後，當要呼叫時，再輸入CAPI('事件名稱',{})。

function CAPI(event, eventData) {
    let fbp = document.cookie.split(';').filter(c => c.includes('_fbp=')).map(c => c.split('_fbp=')[1]);
    let fbc = document.cookie.split(';').filter(c => c.includes('_fbc=')).map(c => c.split('_fbc=')[1]);
    fbp = (fbp.length && fbp[0]) || null;
    fbc = (fbc.length && fbc[0]) || null;

<span style="color: #008800; font-weight: bold">if</span>(<span style="color: #333333">!</span>fbc <span style="color: #333333">&amp;&amp;</span> <span style="color: #007020">window</span>.location.search.includes(<span style="background-color: #fff0f0">&#39;fbclid=&#39;</span>)){
    fbc <span style="color: #333333">=</span> <span style="background-color: #fff0f0">&#39;fb.1.&#39;</span><span style="color: #333333">+</span> (<span style="color: #333333">+</span><span style="color: #008800; font-weight: bold">new</span> <span style="color: #007020">Date</span>()) <span style="color: #333333">+</span><span style="background-color: #fff0f0">&#39;.&#39;</span><span style="color: #333333">+</span> <span style="color: #007020">window</span>.location.search.split(<span style="background-color: #fff0f0">&#39;fbclid=&#39;</span>)[<span style="color: #0000DD; font-weight: bold">1</span>];
}

<span style="color: #008800; font-weight: bold">const</span> headers <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> Headers()
headers.append(<span style="background-color: #fff0f0">&quot;Content-Type&quot;</span>, <span style="background-color: #fff0f0">&quot;application/json&quot;</span>)

<span style="color: #008800; font-weight: bold">const</span> body <span style="color: #333333">=</span> {
    <span style="background-color: #fff0f0">&quot;event&quot;</span><span style="color: #333333">:</span> event,
    <span style="background-color: #fff0f0">&quot;event_data&quot;</span><span style="color: #333333">:</span> eventData,
    <span style="background-color: #fff0f0">&quot;fbp&quot;</span><span style="color: #333333">:</span> fbp,
    <span style="background-color: #fff0f0">&quot;fbclid&quot;</span><span style="color: #333333">:</span> fbc,
    <span style="background-color: #fff0f0">&quot;user_agent&quot;</span><span style="color: #333333">:</span> navigator.userAgent,
    <span style="background-color: #fff0f0">&quot;url&quot;</span><span style="color: #333333">:</span> <span style="color: #007020">window</span>.location.origin <span style="color: #333333">+</span> <span style="color: #007020">window</span>.location.pathname


}

const options = {
    method: "POST",
    headers,
    mode: "cors",
    body: JSON.stringify(body),
}

fetch("MY_PIPEDREAM_URL", options)
}