ThemesWordPress

【失敗】[WordPress]記事タイトルのA/Bを実装させてみたかった

WordPressのPHP/Javascriptで記事タイトルA/Bテストを実装させようとした失敗録。カスタムフィールドの内容が出力されなかった理由を知りたい・・・

広告ここから
広告ここまで

イケダハヤト氏が「欲しいなー」と言っていた「記事タイトルのA/Bテストツール」
こんなサービスあったらいいな:「記事タイトルのABテスト」支援ツール : イケハヤ書店

「WordPressだったらイケんじゃね?」と思ったので、それっぽいものを昼休みに作・・・ろうとした。

作ってる途中で「違う、そうじゃない」となった上、時間切れという尻切れトンボフィニッシュ。

別の実装方法を思いついたので改めて作り直しますが、その時参考にする用の作業メモとして公開します。

カスタムフィールドを追加する。

テストをするには記事タイトルを複数入力できるエリアが必要です。

Aはデフォルトのタイトル欄を使うとして、Bのタイトル欄をカスタムフィールドで作成します。

コードは今朝のGunosyで丁度いい記事があったのでそこからまるごとコピペ。

引用元: 【WordPress】プラグインなしでカスタムフィールド設置!All in One SEOも不要に – ゆめぴょんの知恵.
・functions.php
[php]
// カスタムフィールド追加
add_action(‘admin_menu’, ‘add_custom_fields’);
add_action(‘save_post’, ‘save_custom_fields’);

function add_custom_fields() {
add_meta_box( ‘my_sectionid’, ‘カスタムフィールド’, ‘my_custom_fields’, ‘post’);
}

function my_custom_fields() {
global $post;
$meta_keywords = get_post_meta($post->ID,’meta_keywords’,true);
$h1 = get_post_meta($post->ID,’h1′,true);
$noindex = get_post_meta($post->ID,’noindex’,true);
if($noindex==1){ $noindex_c="checked";}
else{$noindex_c= "/";}

echo ‘<p>キーワード(meta keyword)カンマ区切り。2~6つまで<br />’;
echo ‘<input type="text" name="meta_keywords" value="’.esc_html($meta_keywords).’" size="40" /></p>’;
echo ‘<p>大見出し(h1)40文字以内を推奨<br />’;
echo ‘<input type="text" name="h1" value="’.esc_html($h1).’" size="50" /></p>’;
echo ‘<p>低品質コンテンツならチェックすると「noindex」に<br />’;
echo ‘<input type="checkbox" name="noindex" value="1" ‘ . $noindex_c . ‘> noindex</p>’;
}

// カスタムフィールドの値を保存
function save_custom_fields( $post_id ) {
if(!empty($_POST[‘meta_keywords’]))
update_post_meta($post_id, ‘meta_keywords’, $_POST[‘meta_keywords’] );
else delete_post_meta($post_id, ‘meta_keywords’);

if(!empty($_POST[‘h1’]))
update_post_meta($post_id, ‘h1’, $_POST[‘h1’] );
else delete_post_meta($post_id, ‘h1’);

if(!empty($_POST[‘noindex’]))
update_post_meta($post_id, ‘noindex’, $_POST[‘noindex’] );
else delete_post_meta($post_id, ‘noindex’);
}
[/php]
・header.php
[php]
<?php
$custom = get_post_custom();
if( !empty( $custom[‘meta_keywords’][0] ) ) { $keywords = $custom[‘meta_keywords’][0]; }
elseif( !empty( $custom[‘_aioseop_keywords’][0] ) ) { $keywords = $custom[‘_aioseop_keywords’][0]; }
else{ $keywords = "ブログ,WordPress,プラグイン"; } //デフォルト値
?>
<meta name="keywords" content="<?php echo $keywords ?>">
[/php]

*元記事ではもう1つコードがありますが、noindexの検証がめんどいので省略

A/Bテスト用のjsを作成。

表示切り替えをjsで実装させるので、スクリプトを作成。

これも引用しますw

引用元:初心者でも出来る!Googleアナリティクス「A/Bテスト」設定マニュアル | Find Job ! Startup

ここのバナーA/Bテスト用のものを、記事タイトル用にちゃっとカスタマイズします。

ベタ打ちすると面倒なので、「titile-ab.php」というファイルにまとめて入れてます。
・title-ab.php(ユニバーサルアナリティクス版)
[html]
<script>
$custom = get_post_custom();
jmp = new Array();
txt = new Array();
ga = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "<?php the_permalink() ?>";
jmp[1] = "<?php the_permalink() ?>";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
txt[0] = "<?php the_title(); ?>";
txt[1] = "<?php echo $custom[‘h1’][0] ?>";
// イベントトラッキング(数字はそれぞれのバナーと対応)
ga[0] = ‘ onClick="javascript: ga(\’send\’, \’event\’, \’title-test\’, \’click\’, \’title-A\’)"’;
ga[1] = ‘ onClick="javascript: ga(\’send\’, \’event\’, \’title-test\’, \’click\’, \’title-B\’)"’;
n = Math.floor(Math.random()*jmp.length);
document.write(‘<a href="’+jmp[n]+’" target="_blank"’ + ‘ rel="nofollow"’ + ga[n] + ‘>’);
document.write( txt[n] );
document.write(‘</a>’);
</script>
[/html]

で、テストしていない記事でこのスクリプトを動かすと重たくなるのでif文で処理を分岐させます。
・home.php (the_titleを書いている所を書き換え)
[php]
<?php
$custom = get_post_custom();
if(empty($custom[‘h1’][0])){
the_title();
} else {
get_template_part( ‘title-ab’);
}?>
[/php]

違う、そうじゃない

ここまででカスタムフィールドにタイトルが入っている時のみA/Bテストのjsが出力されるようにはなりました。

しかし実際に動かすと、肝心のタイトルが出てこない・・・

更に「期待されてるA/Bテストって、自分のサイト内でやるもんじゃないよね?」ということに気づいたため、作業中断。

Googleへのインデックス関係はページを分ける必要がありそうです。

ただ、SNSでのシェアや記事内での表示切り替えならjsで処理している所をphpで実装し直すことで対応できそうです。(array_rand関数でいける?)

そんなわけで、時間を作って再度リトライしてみます。

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts