MB blog

こちらは主に自分用のメモです。

GA4 で Contact Form 7 のフォーム送信イベントを最も簡単に検知する方法

Google Analytics 4 で Contact Form 7 のフォーム送信をコンバージョンとして記録するための、もっとも簡単・シンプルな方法をお伝えします。

 

これまで、CF7 にはサンクスページを設定してその表示をコンバージョンさせるとか、

WordPressのContact form 7 はサンクスページを設定せよ!設定手順はこれだ! - 株式会社援軍

CF7 が提供するカスタム DOM イベントを gtag で記述するとか、

[2021年度版]Googleアナリティクス4でContact Form 7のCV計測設定をする手順 – アドベンチャーズ株式会社

あったんですがどちらも面倒くさい。

ここでは GTM のみを使った方法を記載しています。

1.  組み込み変数 "Form Classes" を有効化

GTM の "変数" > "設定" から、フォーム > "Form Classes" にチェックを入れて保存しておきます。

2. ContactForm 7 のフォーム送信トリガーの作成

トリガーのタイプは「フォームの送信」を選択。

トリガーの発生場所は、Form Classes を "wpcf7-form" にすることで、全ての CF7 フォームの送信を検知できる。

3. GA4 イベントタグの発火

上記トリガーを契機に、GA4 イベントを発火させます。

イベント名はここでは "form_submit" にしている(任意)。

イベントパラメータには、パラメータ名として、"page_location"、値に {{Page URL}} を入れることで、フォーム送信が発生した場所を変数に含めます。

GTM プレビューでの見え方。

 

 

Divi サイトで、WordPress サイト言語の変更ができないときの対処法

設定 > サイト言語(Site Language)から、サイト言語を変更できます。

しかし、Divi で運用しているサイトで、インストール済み言語に「日本語」が入っているにもかかわらず、日本語を選択しても English のままで、変更できないことがありました。

f:id:lake_michigan:20220408114638p:plain

「変更を保存」をクリックしても、English(United States)のまま変化なし。

Divi > テーマのオプション から、「翻訳を無効にする」を OFF にしたところ、サイト言語を無事日本語にスイッチできるようになりました。

f:id:lake_michigan:20220408114928p:plain

翻訳の無効化を無効化... つまり翻訳を有効にってことですね。

完全に英語だけの環境で英語だけのサイトを作る場合以外は、ここは OFF にしておいた方がよさそう。

 

参考ページ

Solved: Can't change site language, save not working in WordPress General settings - © Tom Pai

GA4 と旧来のユニバーサルアナリティクスのプロパティを同時に作る

Google Analytics 右下の「管理」メニューをクリックし、「プロパティを作成」をクリック。

GA4 Google Analytics 4 プロパティ作成

①プロパティを作成、に記入していく。タイムゾーンと通貨も忘れず。

この時、水色の「詳細オプションを表示」ボタンをクリックする。

GA4 Google Analytics 4 プロパティ作成

隠れていた「ユニバーサル・アナリティクス プロパティの作成」というセクションが表示される。

GA4 と UA のプロパティを両方作成する、を選択し、次へ。ビジネスのタイプなどを選択し、作成を完了させる。

GA4 Google Analytics 4 プロパティ作成

完了後、プロパティ一覧を見ると、「UA-XXXXX」という旧来のトラッキング ID が入ったユニバーサルアナリティクスのプロパティと、プロパティ名の末尾に「GA4」が入った GA4 プロパティの両方が作成されていることを確認。

GA4 の方には自動的に「ウェブストリーム」が作成されて、G-XXXXXXX という形式の測定 ID が発行されています。

タグ実装にはこの ID を使います。

RankMath Breadcrumbs (パンくずリスト)の区切りに Divi アイコンを使う

2021年時点で最強の無料 Wordpress SEO プラグインであるところの RankMath。
wordpress.org

Breadcrumbs 機能を使うと、カスタマイズ性の高いパンくずリストを作ってショートコードで入れられます。
区切り記号であるセパレーターのチョイスがデフォルトだとイマイチ。

このデフォルトチョイスではなく、セパレータにDivi のアイコン群を使う方法です。

1. RankMath のカスタムセパレータに、Unicode を入れる

The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web | Elegant Themes Blog

上記ページのガイドを参考に、使いたい Divi アイコンに対応するユニコードを調べ、カスタムセパレータの欄に記入します。
今回はこちらの [5] をピックアップ。

f:id:lake_michigan:20210225113958p:plain

2. CSS をセットしてアイコンとして読み込ませる

以下のフォントファミリーをあててあげることで、上記のユニコードがアイコンとして読み込まれます。

.rank-math-breadcrumb .separator {
	font-family: 'ETmodules';
}

Divi のコードモジュールだけではリンクの色やフォントサイズなど細かなスタイルができないので、.rank-math-breadcrumb もここで装飾してあげれば完璧。

f:id:lake_michigan:20210225121020p:plain

完成!

Contact Form 7 Multi-Step Forms で、前のフォームからの入力値に応じて条件分岐をする

Contact Form7 って、いろんな組み合わせプラグインがあってカスタマイズ性が高く、めっちゃ便利ですね。

ページを分割して長いフォームを作ることができる Contact Form Multi-Step Forms。
ja.wordpress.org

ユーザーの入力値に応じて、質問項目の出し分け(条件分岐)ができる Contact Form Conditional Fields 。
ja.wordpress.org

どちらもすごく便利なプラグインですが、両者を組み合わせても、前のフォームの入力値に応じて条件分岐をすることはできません。
Conditional Fields は、同じページのフォーム内の入力値からしか条件を引っ張れないためです。

そこで、Multi-Step で作った前ページのフォームから値をとって、それを元に質問項目を出し分ける JavaScript を書きました。
1ページ目のフォーム内の "prefecture" というフォームへの入力内容が「岐阜」だった場合のみ、次のページでのフォームで「美濃」「飛騨」を選ばせるラジオボタンを出す、というサンプルです。


以下は Contact Form 7 の2つ目のフォームに記載しておく内容。Multi-step プラグインで用意される [multiform] で前フォームの回答内容を取得できますが、値を使うだけなので非表示にしておきます。

<label id="prefecture" class="hide">[multiform "prefecture"]</label>
<div id="area" class="none">
地域を選んでください
  [radio area use_label_element "飛騨地方" "美濃地方"]
</div>

上記にあてる CSS はこちら。[multiform] は値を使うので隠すだけの visibility: hidden とし、div は条件に該当しない限り使わないので display: none で存在を消しておきます。

.hide {
  visibility:hidden;
}

.none {
  display: none;
}

そして、こちらの js を body 下部に挿入。prefecture が岐阜の時のみ、ラジオボタンのエリアを display: block に上書きしています。

  prefecture = document.getElementById("prefecture").textContent;
  var elem;
  if ( prefecture == "岐阜" ) {
    elem = document.getElementById("area");
    elem.style.display ="block";
  }

ACF Pro のギャラリーフィールドの画像から、すべての記事に自動で注目画像を設定する

Advanced Custom Fields の有料版 ACF Pro についてくる、Gallery というフィールドタイプ。画像の数を設定せずに無制限に追加でき、画像をたくさん設定させたい投稿タイプに便利な機能。
このギャラリー内の画像から、自動的に投稿のサムネイル(注目画像)を設定したいと考えました。
投稿内の画像から最初のものをとってきて注目画像に自動設定するためには、XO Featured Image Tools という素晴らしいプラグインがあります(日本人の方が開発されています)。
ja.wordpress.org
しかし、上記は ACF に対応していません。

そこで、以下のコード functions.php に追加することで、ギャラリー内の最初の画像を注目画像に登録するようにできました。

/* 投稿が保存されたときに、以下の function が発動するよう登録 */
add_filter('acf/save_post', 'gallery_to_thumbnail',11,11);
/* ギャラリーの最初の画像を取得して、記事のサムネイル画像にセットする */
function gallery_to_thumbnail ($post_id) {
	$gallery = get_field('ギャラリーフィールドの名前', $post_id, false);
	var_dump($gallery);
	var_dump($post_id);
if ($gallery) {
	$image_id = $gallery[0];
	set_post_thumbnail($post_id, $image_id);
  }
}

Google 広告で広告カスタマイザを使うときのちょっとした注意点

広告カスタマイザとは

「ネット広告運用“打ち手”大全」という本を読んでいて、「広告カスタマイザ」という機能を知った。

余談ですがこの本は神です。Google と Fb 広告の両方を押さえていて、しかもここ数年グッと進化した機械学習ベースの運用方法(ちょっと古い本だと手動運用が前提なので...)にも言及されている。入門書・基本書を押さえたけど運用者として次なるステージに進みたい方は必読!

広告カスタマイザとは、検索したユーザの位置情報時間、そして検索キーワードに応じて広告の文言をカスタマイズする機能のこと。
広告カスタマイザで利用する要素には、「データフィード」と「広告」がある。

データフィード

どの条件(Target location, Target keyword など)においてどんな文言(文字列、整数、価格などのデータ型で自由に設定)を発動させるか、というマッピングを記述したファイル。csv でビジネスデータとしてインポートするよ。

広告

通常のGoogle広告でいう「広告」。広告見出しや説明文の中から、独自構文を使ってデータフィードを呼び出して、広告文を作ります。

早速使ってみましたが、いくつか想定外のことが途中であって手戻りが発生してしまいました。構成を考える前に押さえておきたいTips。

広告カスタマイザを使う前に留意しておくべき点

1. 広告カスタマイザへのデータフィードが承認されるまで時間がかかる

数十件のデータが入ったフィードの審査が終わるまで、1-2時間かかってしまいました。
よーし広告作るぞー!と思ってからデータフィードを用意してたら、実際の広告文を作るところで待ちが発生するので、早めにフィードをアップしておこう。

2. 同じ広告グループの中に、1つは広告カスタマイザを全く使わない広告が必要

カスタマイザが何らかの原因で動かないような時に表示するものがないと困るので、そのためでしょうね。
これは、レスポンシブ広告でもOK。

3. ひとつ広告からは1つのデータフィードしか参照できない

例えば、「位置情報を条件に都市名をトリガしたい」と「検索ワードを条件に製品名をトリガしたい」という2つの要件があったとする。
データを正規化することに慣れている情報系の人なら、それぞれを別の csv ファイルにして独立したフィードとして登録するのが自然でしょう。
でも、これをしてしまうと、両方のカスタマイズを1つの広告に取り入れることができないのです...!これは想定外でした。
なので、csv が空セルだらけで汚くなっても、無理やり全部のカラムを1ファイルにまとめて、単一のフィードとして登録する必要があるというわけ。

4. レスポンシブ広告からは広告カスタマイザは使えない(2020年3月現在)

基本的に自分の広告文組み合わせを信じていなくて、レスポンシブ広告に全幅の信頼を寄せているので、これは地味に辛い。
いつか呼び出せるようになったらいいなぁ。すごく CTR 上がりそう。

5. フィードデータはあとから追加アップロード出来ない

同じ名前のフィードに対して CSV を上書き・追記でアップロードすることは出来ません。
なのでよくよく考慮してデータの漏れがないようにすること。
定期的に追加があるのであれば、スケジューラを使って Google Docs で同期させるのが良いですね。

まとめ

上記を考慮した上で構成を考えましょう。とても便利です。

以下、参照。
support.google.com