Twitter広告コンバージョンAPI最終編～ssGTM + Cloud Functions～

株式会社デジタリフト

2022年12月20日 14:47

TwitterのコンバージョンAPIの話の最終編です。

前編後編で終わりじゃないのかよ！という感じもありますが、後編を書いている途中で『この選択肢もいいかも？』と思い、記載しております。

後編では
①ssGTM 85%、Python(+FastAPI)15%で実装
②ssGTM 40%、Google Apps Script（GAS） 60%で実装
の説明をしていきました。

しかし、ssGTMが稼働しているということは、基本的にGCP(Google Cloud Platform)を使用していると思います。

ならば、GCP内で完結出来る方がよくないか？と考えたわけです。

というわけで、
①ssGTM 85%、Python(+FastAPI)15%
のうち、Python(+FastAPI)の部分をGCPのCloud Functionsでやろう！！という話になります。

nonceの計算とsignatureの生成をCloud Functionsでやります。

まずは認証掛けずに設定する方法を説明し、その後に認証をかける方式を紹介してみます。

Cloud Functionsでnonce生成の関数を作成

さっそく、Cloud Functionsを見ていきましょう。
GCPにログインして、メニューからCloud Functionsをクリック。

関数の作成をクリック

すると「構成」画面に遷移します。
環境は「第2世代」にし、関数名は適当に名付けます。

リージョンもどこでもいいですが、一応「asia-northeast1」が東京になります。「asia-northeast2」が大阪です。
（どこでもと書きましたが、リージョンによって微妙に料金が異なります）

トリガーの「HTTPS認証」は、今回は一旦「未認証」を選択します。

ここまで設定したら、「次へ」

実際にコードを記載する部分です。
ランタイムは何でもいいですが、ここでは「Python 3.10」で説明します。

functions_frameworkはデフォルトでインポートされています。
これに加えて、secrets をインポートします。

標準ライブラリなので、「requirements.txt」に追加で記載する必要はありません。

実際のコードはこちら。Pythonで書いたときとほぼ同じですね。

import functions_framework
import secrets


@functions_framework.http
def fn_nonce(request):
    method = request.method
    if method == 'POST':
        _nonce = secrets.token_urlsafe(32)
        nonce = ''.join(char for char in _nonce if char.isalnum())
        return {'nonce': nonce}

上部の「エントリポイント」をコード内の関数名と同じに編集します。
（名前自体はなんでもOK）

requirements.txtはデフォルトでOK（とくにいじりません）

ここまで書けたら、「デプロイ」です！

するとページが遷移します。
デプロイ中は「ビルド」と「サービス」が「Creating build」や「保留中」となっていると思いますが、気長に待ちましょう。

すべて完了すると、関数名に「緑マーク」がつきます。
と、同時に「エンドポイントURL」も吐き出されます。

ではこのエンドポイントへPOSTリクエスト送ってみましょう。

Curlコマンドでも何でも大丈夫ですが、せっかくなのでssGTMを使ってみます。テンプレートから「新規」をクリック。

コードタブにて以下のように記載。

const sendHttpRequest = require('sendHttpRequest');
const log = require('logToConsole');

const URL = "https://function-nonce-cp2pfbr3cq-an.a.run.app";

sendHttpRequest(URL, {
  method: 'POST'
}).then((res) => {
  log(res);
  log(res.body);
});


data.gtmOnSuccess();

権限タブで、『HTTPリクエストの送信』を「すべてのHTTPS URL」にしておきます。本番運用するときは指定するべきですが、一旦テストするだけなのでOKです。

そしたら、「コードを実行」をクリック

すると、コンソールにレスポンス結果が表示されます。
（もしかすると、Time Out的なメッセージが出るときもありますが、焦らず、再度「コードを実行」をクリックしてみましょう。）

res.bodyのlogで
{"nonce": "略"}
というjsonが返ってきていれば問題なしです。
（「略」とした部分は毎回変わるので、添付と同じ文字列になっている必要はないです）

では次、signatureを生成する関数を作ってみましょう。

Cloud Functionsで signature生成の関数を作成

コードの部分までは「nonce」のときと同様なのでさくっと書きます。
「関数の作成」⇒環境を「第2世代」にして、関数名を自由につける。

トリガーの認証はデフォルトでは「認証が必要」なので、
ここでは一旦「未認証の呼び出しを許可」で進めます。

「次へ」をクリックし、コード編集画面へ。

ここではランタイムを「Python 3.10」にします。

base64, hmac, hashlib, urllib をインポートします。
すべて標準ライブラリなので、requirements.txtに追記する必要はここでもないです。

コードはこちらもほぼPythonのときと同じです。

import functions_framework
import base64
import hmac
import hashlib
import urllib


@functions_framework.http
def fn_sigsig(request):
    method = request.method
    if method == 'POST':
        data = request.get_json()
        signkey = bytes(data.get('key'), 'utf-8')
        base_string = bytes(data.get('value'), 'utf-8')
        m = hmac.new(signkey, base_string, digestmod=hashlib.sha1).digest()
        m_base = base64.b64encode(m)
        result = urllib.parse.quote(m_base, safe="")

        return {'signature': result}

そして、エントリポイントを関数名に変更します。

終わり。「デプロイ」をクリック。しばらく待つ。

するとエンドポイントURLが吐き出されますので、
またssGTMでPOSTリクエスト送ってみましょう。

コードは以下。

const sendHttpRequest = require('sendHttpRequest');
const JSON = require('JSON');
const log = require('logToConsole');

const URL = "https://function-sigsig-cp2pfbr3cq-an.a.run.app";

const headers = {
  "Content-Type": "application/json"
};

const key = "abc";
const value = "あいうえお";

const payload = {
  key: key,
  value: value
};



sendHttpRequest(URL, {
  headers: headers,
  method: 'POST'
}, JSON.stringify(payload)).then((res) => {
  log(res);
  log(res.body);
});


data.gtmOnSuccess();