カテゴリーアーカイブ 日々のこと

Ninja Formsで完了ページを別途作ってないけどGoogle Analyticsでコンバージョンが取りたい。
どのフォームからかに加えて、どのタイプに申し込んだかも取れるようにしたい。

基本的な設定方法

大まかな流れ

• 送信（nhFormSubmitResponseイベントの発火）時にjQueryデータレイヤーにイベントとパラメータを送信するタグを作成、トリガーは全ページ
• 上記のタグでデータレイヤーに発信されたイベント「ninjaFormSubmission」発火を検知してアナリティクスにイベントを送信するタグを追加
• そのタグのラベル部分でフォームIDなどを渡すことで判別可能に
• アナリティクス側では受け取ったイベントのフォームIDなどで目標を振り分け

フォームID以外の情報を渡す

nfFormSubmitResponseのコールバック関数の引数responseの中にはフォーム送信データがごっそり入っているので、response.response.data.fields_by_key を使えば幸せになれる。

Ninja Formsで「business-type」というフィールドキーを設定したフィールドの値を、BusinessTypeというデータレイヤー変数に渡すようにした。カスタムJSは以下のような形。

<script>
jQuery(document).ready( function() {
  jQuery(document).on('nfFormSubmitResponse', function(event, response, id) {
      dataLayer.push ({
            'event' : 'ninjaFormSubmission',
            'NFformID' : response.id,
            'BusinessType' : response.response.data.fields_by_key['business-type'].value
        });
     });
});
</script>

うっかりフィールドキーにハイフンを使っていたためドットシンタックスで指定できなくて躓いた。

※こちらの方法はプラグインソースを直接編集している無理やりな方法です。最初からマルチサイトに対応しているプラグインを選択できるならそちらのほうをおすすめします（ACFとか）。

Custon Field Suiteはもともとマルチサイト非対応で、最初に CFS()->get() が呼び出されたblog_idのプレフィクスのwp_postテーブルに対するselectクエリをキャッシュとして保持し、使い回すため、switch_to_blogするとその後のCFS()->get()で正しく結果を受け取れないという動作が発生してしまっていた。

includes/field_group.php 15行目あたりのキャッシュを返す処理を無効化すれば、switch_to_blogしても動作するようになったが、そうするとクエリ数が膨大になってしまう。

キャッシュ部分をよく見るとCustom Field Suiteのキャッシュはマルチサイトを想定していない配列に確保していたので、ここをマルチサイトに対応した構造にカスタマイズ。

includes/field_group.php

public function load_field_groups() {
    global $wpdb;
        
    /*
    if ( isset( $this->cache['field_groups'] ) ) {
        return $this->cache['field_groups'];
    }
    */
    if ( isset( $this->cache['field_groups'][$wpdb->posts] ) ) {
        return $this->cache['field_groups'][$wpdb->posts];
    }        
        ...中略...

    //$this->cache['field_groups'] = $output;
    $this->cache['field_groups'][$wpdb->posts] = $output;

    return $output;
}

includes/api.php

public function get_field( $field_name, $post_id, $options ) {
    global $wpdb,$post; //$wpdbを追加

    ...中略...

    // Trigger get_fields if not in cache
    //if ( ! isset( $this->cache[ $post_id ][ $options['format'] ][ $field_name ] ) ) {
    if ( ! isset( $this->cache[ $wpdb->posts ][ $post_id ][ $options['format'] ][ $field_name ] ) ) {
        $fields = $this->get_fields( $post_id, $options );
        return isset( $fields[ $field_name ] ) ? $fields[ $field_name ] : null;
    }
    return $this->cache[ $wpdb->posts ][ $post_id ][ $options['format'] ][ $field_name ];
}

public function get_fields( $post_id, $options ) {
    global $post, $wpdb;

    ...中略...

    // Return cached results
    //if ( isset( $this->cache[ $post_id ][ $options['format'] ] ) ) {
    if ( isset( $this->cache[ $wpdb->posts ][ $post_id ][ $options['format'] ] ) ) {
        return $this->cache[ $wpdb->posts ][ $post_id ][ $options['format'] ];
    }

    ...中略...

    //$this->cache[ $post_id ][ $options['format'] ] = $field_data;
    $this->cache[ $wpdb->posts ][ $post_id ][ $options['format'] ] = $field_data;
    return $field_data;
}

これで無駄なクエリ数も抑えられた…と思う。
直接ソースを弄っているので、当然アップデートすると元に戻ってしまうので注意。

特定のiPad（iPadOS12.4.1(16G102)）のSafariとChromeで、opacityを使ったフェードインCSS animationが動作してくれなかった。なんでかなと調べたら、初期化用opacityは0/1、keyframes側では0%,100%を使用、と単位が違っていたからのようだ。

@keyframes fadeIn{
    0%  {opacity: 0%;}
    100%{opacity: 100%;}
}
.fade-in-element {
    opacity: 0; /* 単位が%でない！ */
    animation: fadeIn 1s;
}

単位を％で統一するか、逆に0／1で統一するとちゃんと動作した。
より新しいバージョンのiPhoneやWindowsでは単位が違っていても解釈してくれていたようだ。
念の為メモ。

opacity – CSS: カスケーディングスタイルシート | MDN

によれば、opacityプロパティの取りうる値は<alpha-value>、
0.0以上1.0以下の<number>か、0％～100％の<percentage>となっている。
古いバージョンではこれが混在すると別プロパティとして取り扱われてしまっていたのかもしれない。

PC, Androidでは動くのに、iOS（iPhoneのSafari, Chromeなど）でsvgのストロークアニメーションが動かないケースに出くわした。

.path-stroke {
	stroke: #FFF000;
	stroke-width: 2px;
	animation: svg-stroke 5s ease-in;
}

@keyframes svg-stroke {
	0% {
		stroke-dasharray: 2000;
		stroke-dashoffset: 2000;
	}
	100%{
		stroke-dashoffset: 0;
	}
}

原因としては、keyframes内のstroke-dasharrayプロパティが開始位置にしかいないことだった。どうやら変化しないプロパティがkeyframes内にあると不具合を起こすっぽい。
以下のように変更したら動作した

.path-stroke {
	stroke: #FFF000;
	stroke-width: 2px;
	stroke-dasharray: 2000; /* 変化しないプロパティはこちらに移動 */
	animation: svg-stroke 5s ease-in;
}

@keyframes svg-stroke {
	0% {
		/*stroke-dasharray: 2000;*/
		stroke-dashoffset: 2000;
	}
	100%{
		stroke-dashoffset: 0;
	}
}

よ！

サーバー引っ越しをした際に load-styles.php の読み込みでエラーになったわけである。
WPバージョンは4.8.2
PHPはいずれも5.6.30

色々追っかけてみるとphp.ini で2つの値の違いが見つかった。
output_handler
mbstring.encoding_translation

正常動作する方は
output_handler は設定されておらず
mbstring.encoding_translation = Off

エラーを出す方は
output_handler = mb_output_handler
mbstring.encoding_translation = On

だった。

Chromeで上記メッセージとともにPDFが表示されない現象が発生。
ファイルサイズが1MB以下程度であれば発生しない。
Microsoft Edge, IE11でもダウンロードが途中で止まっているような気配。
Firefox,Safariでは問題なし。

僕のケースの場合、原因は.htaccessにおけるmod_deflate使用の記述でした。

<IfModule mod_deflate.c>
   SetOutputFilter DEFLATE
</Ifmodule>

としていたことが原因。SetOutputFilter行をコメントアウトしたら解決。
コンテンツを圧縮して転送量を減らしてくれるモジュールなんですが、それがPDFになにかしら悪影響を与えていた様子。