カート離脱防止アラートを表示させる

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
生まれ年ワインショップの離脱防止

 前回の「カート入力時にフリガナ、FAXを入力しなくて良い方が成約が上がる!」の記事に続いて、カートページをカスタマイズした施工方法について書いてみたいと思います。

目次

カートの離脱防止に効果的?

 前回も書きましたが、ショップ運営をしていると、EFO(エントリーフォーム最適化)について考えることがあります。EFO(とは、いわゆるカゴ落ち対策で、私もプレゼントワインショップを開設して落ち着いてきたころ、もっと買いやすいカートのフォームのほうがいいなと思ったことがありました。

 その中で、考えたことの1つ。私も別のサイトで買い物をしていて、カート入力中についリンクのあるボタンに触れてしまったりして、異動してしまい、入力中のものが全て消えてしまうことがありますが、あれ、かなりやる気がそがれますよね。「もう買うのいいやぁ・・・」ってちゃっちゃいます。
 そこで、よく見かける離脱防止のアラートがなると、成約率が上がるのではないかと思っていたのです。ただ、コレ、本当に離脱したいときにはウザいので、そこらへんは紙一重なのですが、スマホで購入する人が増えているので、画面のどこかに触れてしまって、入力中のものがパーになるのは本当に困ります。

フェイスブックの離脱防止アラート
フェイスブックで見かけるアレというと分かりやすいのではないでしょうか

離脱防止アラートについて調べると・・・

 さて、この離脱防止アラートについても、めちゃ詳しく設置方法を書いてくれているのは、やっぱり

『Welcart カスタマイズ ブログ』さん!!
http://welcustom.net/

 『Welcart カスタマイズ ブログ』さんの「カートページからの離脱を防止するアラート」に書かれています。

いざ設置

 『Welcart カスタマイズ ブログ』さんの「カートページからの離脱を防止するアラート」を見て、コピーでOKなのかな?と思っていると、やっぱりエラーが出た覚えがあります(もう覚えていないのですが)。順番に見ていってみましょう。

下記のコードをhead要素内のwp_head()より後に記載します。
カートページからの離脱を防止するアラート」『Welcart カスタマイズ ブログ』

 この意味は分かる方が多いと思いますが、より詳しく書くと、Welcartの子テーマ内の「テーマヘッダー(header.php)」ファイル中の


    <?php wp_head(); ?>

の1行よりも後に、次のコードを記載するということです。そして記載するように書かれているコードが


<?php
    $alert_pages = array("customer", "delivery", "confirm");
    if( in_array(usces_get_page_mode(), $alert_pages)): ?>
<script>
jQuery(document).ready(function(){
  jQuery(window).on("beforeunload", function(){
    return "ご注文は完了していません。";
  });
  jQuery("input[type=submit], input[type=button], input[type=image]").click(function() {
        jQuery(window).off('beforeunload');
    });
});
</script>
<?php endif; ?>

です。
 なので、上記をコピーして、皆さんのWelcartの子テーマ中の「header.php」の所定の箇所にペーストして下さい。続いて、書かれているのが

jQueryを動かす為には、使用中のテーマでjQueryを読み込む設定をしている必要があります。それにはwp_head()より前にwp_enqueue_script(‘jquery’);を記載するか、functions.phpに以下のようなアクションフックを記載します。

でそのコードは


add_action('wp_enqueue_scripts', 'myScript');
function myScript() {
    wp_enqueue_script('jquery');
}

なのですが、これは皆さんの子テーマ内のfunction.phpにコピペする前に、一度バックアップをとっておいてみてください。私は、エラーでフリーズしたような気がするのですよねぇ。

実際のコードを公開しておきます

 エラーが出て修正したと思われるコードを書いておきますね。現在の「生まれ年ワインショップ」の子テーマのfunction.phpに書いてあるコードは、この離脱防止アラートと他のものを組み合わせているのですが、おそらくこの離脱防止アラートだけの時は次のようなコードでした。


/*離脱防止用*/
function my_scripts(){
   wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');
/*離脱防止用(終了)*/

 以上です。 今、見直してみても、myScript⇒my_scriptsの部分を修正したのだと思います(違ったらすみません^^;)。皆さんもコピーしてやってみてください^^

 ちなみに、離脱防止アラートは下の画像のようにちゃんと出たのですが、エラーメッセージは上で設定したメッセージとは違うのですよねぇ。

生まれ年ワインショップの離脱防止

 スマホだと、

スマホの離脱防止

※2017年、スマホの離脱防止アラートが効果がなくなってしまったかもしれません。WordPressのアップデートが関係しているのでしょうか

お願い

検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店生まれ年ワインショップもしくは、日本初のプレゼント専門ワインショッププレゼントワインショップをご利用いただけると嬉しいですm(__)m
 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメント

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください