1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 臉書
  6. »
  7. 免寫CODE一鍵快速部署Facebook的轉換API與傳送需要的事件

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

2022/06/10

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

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


Pipedream
Step1
首先在註冊完Pipedream後,再點FB轉換API的連結,接著點右上的Copy鈕。
梅問題-
Step2
在把剛剛的碼複製到自己的專案底下後,這邊有三個參數需要作修改,分別為tokenpixelID事件測試碼
梅問題-
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) }

梅問題-
Step11
接著當成功後,在Pipedream就會出現剛傳送的時間。
梅問題-
Step12
這時再到Facebook的事件管理器中的測試事件就會看到啦!是不是超簡單呀!這樣每月立即省三千啦!
梅問題-
#原教學網址: https://trackingchef.com/