ECのウェブ担当者のメモ

ECサイトを運営管理している、WEB担当プログラマのメモ

スポンサーリンク

検索でのランディングページを確認する方法

f:id:jun9632:20170709143836p:plain

Googleアナリティクスで、検索でどんなページがランディングしているか確認する方法です。

まず、Googleアナリティクスを開いて

[集客] > [Search Console] > [ランディングページ]をクリックします。

f:id:jun9632:20170709141333p:plain

そうすると、ランディングページの一覧を確認することができます。

ランディングページの結果ページで考えること

まず、ランディングページの結果を何のためにみるのか?です。

そもそも、ランディングページ(LP)なので、最初にアクセスしたページです。 つまり、Googleの検索や、メール、URLを直接入力して、どこかのページにランディングします。 そのページが、ランディングページです。

そして、サイトやページにはきっと何かしらの目的があると思います。

  • 自社の商品を買ってもらうことや
  • 申し込みをしてもらうこと
  • 自社の商品を知ってもらうこと

それぞれあると思います。

そのランディングしたページから、目的を達成するための導線をつなげることが ランディングページを分析する、目的だと思います。

基本的な事かもしれませんが、これを意識するかしないかは大きなことだと思います。 まずはこのことを意識してみてください。

ある目的を持ったページ、ちゃんと目的に向かった誘導できているのか?

言い換えれば

ある商品の購入してもらうためのページが、ちゃんと購入に向けて誘導できているのか。

これを意識すると、

購入だけがゴールではなく、 ちゃんと商品のことを説明しないといけないとか、 自社のことを信頼してもらえないといけないとか、 購入後もサポートがちゃんとあって安心してつかえることを知ってもらえないといけないとか

いろいろな、改善点が見えてくるのではないでしょうか?

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応

Railsのmeta-tags gemで og:image:widthと og:image:heightを設定する

f:id:jun9632:20170630233130p:plain

タイトルの通りですが、Ruby on Rails でSEO系のタグをいい感じに設定が出来る meta-tags のgemを使って、og:image:widthと og:image:heightを設定する方法です。

meta-tags gemは以下です。

github.com

で。

そもそも、なんで、og:image:widthと og:image:heightを設定するかと言えば

Facebookでページをシェアする際に、はじめてのページだと画像が一発で表示されないんです。 その対応として、以下の方法があるようです。

  • シェアデバッガーを使用して画像をプリキャッシュする
  • og:image:widthおよびog:image:height Open Graphタグを使用する

です。

公式はこちら

ベストプラクティス - シェア機能 - ドキュメンテーション - 開発者向けFacebook

最初のシェアデバッガーを使用して画像をプリキャッシュするというのは、 がっつり手作業なので却下です。

以下のページが、URLを入力して、「取得」みたいなボタンを押すイメージです。

developers.facebook.com

もう一つの

og:image:widthおよびog:image:height Open Graphタグを使用するは、タグを設定しておけば 良しなにはからってくれそうなので、こちらを採用します。

書き方

そして、ココからが本題のコードの書き方です。

最初に書きます。

- set_meta_tags ({title: 'タイトル',
        description: 'デスクリプション',
        og: {image: {_: 'https://example.com/aaaa.jpg', width: 1200, height: 630}}})

です。

一番の肝心なところは、

_:

imageにhashで指定するんですが、 画像のURLのkeyを

_ (アンバーバー)

にしないといけないんです。

そうなんですね。ぐらいの感想しかでない感じです。

なにはともあれ、_ (アンバーバー)を使ってください

そうすると。

<meta property="og:image" content="https://example.com/aaaa.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

と出力してくれます。

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

これからのSEO内部対策 本格講座

これからのSEO内部対策 本格講座

Ruby on Railsで UTCの時間をJSTに変換する。

f:id:jun9632:20170629120557p:plain

例えば

logined_atにUTCの時間が入っているとして、

p logined_at

# 2017-06-29 02:26:41 UTC

この logined_atをJSTで表示したいとき

in_time_zone('Tokyo')

を使います。

p logined_at.in_time_zone('Tokyo')

# Thu, 29 Jun 2017 11:26:41 JST +09:00

Ruby on Rails 関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5アプリケーションプログラミング

RailsのActiverecordeで既についているNot null制約を外す

f:id:jun9632:20170622101223p:plain

ActiverecordeでカラムにNotNull制約をつけてしまったけど、 やっぱり、NotNull制約を外したいなんて時ありますよね。

そんな時は、

change_column_null

マイグレーションファイルを下記の用になります。

class ChangeNotNulToUser < ActiveRecord::Migration[5.0]
  def up
    # Not Null制約を外す(NULLがOK)
    change_column_null :users, :name, true
  end

  def down
    # Not Null制約を付ける(NULLがNG)
    change_column_null :users, :name, false
  end
end
change_column_null [テーブル名], [カラム名], [true|false]

要件が変わってしまここともあるので、仕方ないですが。 そもそも、こういう変更はなるべくしないようにしたいですね。 ちゃんと設計しなさいですね。

 関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

改訂2版 パーフェクトRuby

改訂2版 パーフェクトRuby

参考サイト

change_column_null (ActiveRecord::ConnectionAdapters::SchemaStatements) - APIdock

Rails simple_formatの勝手につく<p>タグを削除したい

f:id:jun9632:20170509110049p:plain

Railsのsimple_formatを使うと勝手に

タグで囲まれます

- text = 'aaaaa'
= simple_format(text)

みたいにすると

<p>aaaa</p>

と出力されます

そんな時に、

<p> => <div>

にしたい時は

- text = 'aaaaa'
= simple_format(text, {}, wrapper_tag: "div")

とすると。

<div>aaaa</div>

にたいになります。

小さく無駄にハマるまえにドキュメントみないとですね。

参考サイト

simple_format (ActionView::Helpers::TextHelper) - APIdock

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

Ruby on Rails 5 超入門

Ruby on Rails 5 超入門

Googleスプレッドシートのショートカット一覧

f:id:jun9632:20170428100849p:plain

MacのGoogleスプレッドシートのショートカット一覧です。

個人的には、ショートカットで行を挿入 「control+option+I、R」 したかっただけですが、 いちよう一覧で記載しておきます。 ご参考まで

一般的な操作

項目 ショートカットキー
列を選択 control+space
行を選択 shift+space
すべて選択 ⌘+A, ⌘+shift+space
元に戻す ⌘+Z
やり直す ⌘+Y ⌘+shift+Z fn+F4
検索 ⌘+F
検索と置換 ⌘+shift+H
範囲へコピー ⌘+return
下方向へコピー ⌘+D
右方向へコピー ⌘+R
保存(すべての変更はドライブに自動的に保存されます) ⌘+S
開く ⌘+O
印刷 ⌘+P
コピー ⌘+C
切り取り ⌘+X
貼り付け ⌘+V
値のみ貼り付け ⌘+shift+V
一般的なキーボード ショートカットを表示 ⌘+/
コントロール非表示 control+shift+F
入力ツールのオン、オフ(非ラテン系言語のスプレッドシートで使用可) ⌘+shift+K
入力ツールを選択 ⌘+option+shift+K

セルの書式設定

項目 ショートカットキー
太字 ⌘+B
下線 ⌘+U
斜体 ⌘+I
取り消し線 option+shift+5
中央揃え ⌘+shift+E
左揃え ⌘+shift+L
右揃え ⌘+shift+R
上に枠線を適用 option+shift+1
右に枠線を適用 option+shift+2
下に枠線を適用 option+shift+3
左に枠線を適用 option+shift+4
枠線を削除 option+shift+6
外枠を適用 option+shift+7
リンクを挿入 ⌘+K
時間を挿入 ⌘+shift+;
日付を挿入 ⌘+;
日付と時刻を挿入 ⌘+option+shift+;
書式を小数に設定 Ctrl+Shift+1
書式を時刻に設定 Ctrl+Shift+2
書式を日付に設定 Ctrl+Shift+3
書式を通貨に設定 Ctrl+Shift+4
書式をパーセンテージに設定 Ctrl+Shift+5
書式を指数に設定 Ctrl+Shift+6
書式をクリア ⌘+\

スプレッドシートの操作

項目 ショートカットキー
行の先頭に移動 fn+←
シートの先頭に移動 ⌘+fn+←
行の末尾に移動 fn+→
シートの末尾に移動 ⌘+fn+→
アクティブセルまでスクロール ⌘+delete
次のシートに移動 ⌘+shift+fn+↓
前のシートに移動 ⌘+shift+fn+↑
シートリストを表示 option+shift+K
ハイパーリンクを開く option+return
データ探索を開く option+shift+X
スプレッドシートからフォーカスを外す control+⌘+shift+M
合計機能に移動(セル範囲を選択している場合) option+shift+Q
ポップアップにフォーカスを移動(リンク、ブックマーク、画像) control+⌘ を押しながら E、P
フィルタ処理したセルのプルダウン メニューを開く control+⌘+R
変更履歴を表示 ⌘+option+shift+G
スプレッドシート内でチャットを開く shift+esc
図形描画エディタを閉じる ⌘+esc shift+esc

メモとコメント

項目 ショートカットキー
メモを挿入、編集 shift+F2
コメントを挿入、編集 ⌘+option+M
コメントのディスカッション スレッドを開く ⌘+option+shift+A
現在のコメントを入力 control+⌘ を押しながら E、C
次のコメントに移動 control+⌘ を押しながら N、C
前のコメントに移動 control+⌘ を押しながら P、C

メニュー

項目 ショートカットキー
[ファイル] メニュー control+option+F
[編集] メニュー control+option+E
[表示] メニュー control+option+V
[挿入] メニュー control+option+I
[表示形式] メニュー control+option+O
[データ] メニュー control+option+D
[ツール] メニュー control+option+T
[フォーム] メニュー(スプレッドシートがフォームにリンクされているときに表示) control+option+M
[アドオン] メニュー新しい Google スプレッドシートに表示) control+option+N
[ヘルプ] メニュー control+option+H
[ユーザー補助機能] メニュー(スクリーン リーダーのサポートの有効時に表示) control+option+A
シートメニュー(コピー、削除などのシート操作) option+shift+S
コンテキスト メニュー ⌘+shift+\

行や列の挿入、削除

項目 ショートカットキー
行を上に挿入 control+option+I、R
行を下に挿入 control+option+I、W
列を左に挿入 control+option+I、C
列を右に挿入 control+option+I、G
行を削除 control+option+E、D
列を削除 control+option+E、E

数式

項目 ショートカットキー
すべての数式を表示 control+~
配列数式を挿入 ⌘+shift+return
拡張した配列数式を折りたたむ ⌘+E
数式のヘルプを表示/非表示(数式の入力時) shift+fn+F1
数式ヘルプの全表示、コンパクト表示(数式の入力時) fn+F1
絶対参照、相対参照(数式の入力時) fn+F4
数式結果のプレビューを切り替え(数式の入力時) fn+F9
数式バーをサイズ変更(上または下に移動) control+option+↑ または control+option+↓

スクリーン リーダーのサポート

項目 ショートカットキー
スクリーン リーダーのサポートを有効にするGoogle スプレッドシートでスクリーン リーダーを使用する方法の詳細 ⌘+option+Z
列を読み上げる ⌘+option+shift+C
行を読み上げる ⌘+option+shift+R

参考ページ

詳しくはこちらを確認してください。

support.google.com

関連記事

marketing-web.hatenablog.com

仕事で使える!Googleスプレッドシート Chromebookビジネス活用術 (仕事で使える!シリーズ(NextPublishing))

仕事で使える!Googleスプレッドシート Chromebookビジネス活用術 (仕事で使える!シリーズ(NextPublishing))

lazyload.jsの使い方まとめ

f:id:jun9632:20170308174421p:plain

色んな使い方があるんですね。

参考になります。ありがとうございます。

cly7796.net

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

jQuery最高の教科書

jQuery最高の教科書