MB blog

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

import gspread が cannot import name 'external_account_authorized_user' from 'google.auth' エラーになる問題

Anaconda3 + PyCharm の環境で、gspread ライブラリを使って
GCP の事前設定後に以下のコマンドでライブラリをインストールし、つつがなく完了。

conda install -c conda-forge gspread
conda install -c conda-forge oauth2client

しかし、コードを実行すると import gspread でいきなりエラーに。cannot import name 'external_account_authorized_user' from 'google.auth' と言われてしまいます。
この時 google-auth-oauthlib のバージョンが 0.7.1 でインストールされていたのですが、これが 0.6 以上だとこのようなエラーが出るようで、0.5.2 にダウングレードすることで解消しました。


PyCharm > Preferences > Project を選択 > Python Interpreter から "google-auth-oauthlib" をクリックし、右下の Specify version で 0.5.2 を選択してから Install Package をクリックしました。


どなたかのヘルプになれば幸いです。

ConoHa WING から Gmail に転送していたメールが配信エラーになる問題

長らく ConoHa WING の「メール転送」機能を使って、Gmail アドレスに転送して使っていた独自ドメインメール。

support.conoha.jp

しかし今年(2022年)の夏頃から、配信エラーになって送信エラーになって戻ってしまったり、届いても SPAM 判定を受けて迷惑メールフォルダに入っていてしまったり。

この転送設定を使わずに、シンプルに Gmail をメールクライアントとして POP3 設定することで(おそらく)解決されました。テストした限りでは、これまでエラーになってしまった全てのメールが問題なく受信できています。

方法は ConoHa WING のマニュアル上にも記載がありました。

support.conoha.jp

ConoHa の SMTP サーバーを Gmail から設定する方法も記載があったので、この方法に変更しました。

今までは GmailSMTP を使って偽装していたのだった。 

lake-michigan.hatenablog.com

エラーになっていた原因はよくわかりませんが、怖いので、ConoHa WING のメール転送は今後使わないでおこうっと。

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";
  }