ワードプレスの問合せプラグインcontact form 7にDairinを導入する方法
![](https://dair.in/wordpress/wp-content/uploads/2024/01/cdd84b8ff05c9d60b56687618945b1b8.png)
ワードプレスのお問い合わせプラグインのcontact form 7にDairinを導入する方法をご説明します。
前提として成果の計測ポイントを申し込み・問合せにするケースでご説明します。
STEP1:Dairinの管理画面から中間コンバージョンタグを取得
Dairinの管理画面を開いてキャンペーンの詳細ページを開きましょう。
中間コンバージョンのタグからキャンペーンコードを取得します。
メモ値などにコピペしておくと後で分かりやすいです。
![](https://dair.in/wordpress/wp-content/uploads/2023/07/29920b8c84dbe59a641d520c2bb7094c-1-1280x648.jpg)
STEP2:ワードプレス管理画面のcontact form 7の設定を確認
ワードプレス管理画面のメニューからcontact form 7の設定を確認します。
問い合わせに利用しているフォームの設定を開いてください。
![](https://dair.in/wordpress/wp-content/uploads/2023/12/147d1b51d2d13573bcb158cfde4963b6.png)
メールアドレスの入力欄を確認します。
![](https://dair.in/wordpress/wp-content/uploads/2023/12/c8a8a2c6a8622d0e910f83fa54288a83-971x720.png)
メールアドレスの入力欄部分の”email” に続く、赤枠の部分の名前をコピーしておきます。
通常、contact form 7では”your-email”になっているはずです。
もし他の名前になっていれば、その名前をコピーしましょう。
STEP3:メモ帳アプリなどでコードの作成
以下のコードをコピーして、メモ帳アプリなどに貼り付けてください。
<script>
function mask_email(email) {
return email.replace(/.@./, '*@*');
}
document.addEventListener('wpcf7mailsent', function(event) {
let drnEmail = '';
for(let i = 0; i < event.detail.inputs.length; i++){
if(event.detail.inputs[i].name == 'your-email'){
drnEmail = event.detail.inputs[i].value;
break;
}
}
(function(w,f){w[f]=w[f]||function(){w[f].q=w[f].q||[];w[f].q.push(arguments);};})(window,'dairin');
dairin("signup", {
customer_uid: mask_email(drnEmail),
event_id: '',
campaign_code: 'xxxx'
});
});
</script>
赤文字部分をあなたの設定に合わせて変更していきます。
【変更ポイント1】
campaigin_codeを中間コンバージョンタグのキャンペーンコードに入れ替えます。
STEP1で取得したキャンペーンコードに変更してください。
【変更ポイント2】
your-emailの部分をSTEP2で取得した名前にします。
※もしワードプレスのcontact form 7のメール入力欄がyour-emailなら変更の必要はありません。
STEP4:ワードプレスの管理画面で問い合わせページにコードを入れる
contact form 7を使っているお問い合わせページや、申込みページを開きます。
ワードプレスのエディタからカスタムHTMLを選択します。
![](https://dair.in/wordpress/wp-content/uploads/2023/12/346787f4c978db80261b8ad145c588d3.png)
※クラシックエディタをお使いの場合は、HTML編集ができるテキストモードでタグを記入してください。
先ほど作ったタグをコピー&ペーストします。
![](https://dair.in/wordpress/wp-content/uploads/2023/12/4eb164869440e65890179fcbf19446e1.png)
記事を保存をして完了です。