BuzzStrikeランディングページの設定方法

ここではランディングページのファイル(bs_lp)とストライクステップを用意して下さい。
作業に入る前に必ずランディングページのファイルのバックアップを取っておいて下さい。

ランディングページのコード変更を行う前に
まずストライクステップ側の設定を行います。

1,リストグループの作成

1.こちらからアカウント情報を確認し【無料版】ストライクステップにログインします。

(上記リンク先の情報を見る為に会員ログインが必要です。)


2.ストラクステップにログインできたら、上部メニューバーの一番左の

リストグループ > リストグループの作成 をクリックします。


3. 新規リストグループ詳細に必要事項を入力します。

入力項目 入力事項
リストグループ名 BuzzStike
リストの管理者名 お名前又は屋号を入れて下さい。この名前がメール送信時のデフォルトの名前になります
管理者のメールアドレス メール送信元のメールアドレスになります。フリーメールアドレス禁止(メールが届かない原因になります)。ご自分のドメインアドレスを使うには必ずSPF設定を行って下さい。もしSPF設定が分からない場合、[email protected]com と入力して下さい。
返信先 連絡可能なご自分のメールアドレス(フリーメールアドレス可)
リスト保有者へ通知 チェックを外して下さい。

※カスタムフィールド、表示フィールド、配信者情報はそのまま何もいじらずに保存を押して下さい。


4.リストグループ > リストグループを見るをクリックすると一覧にリストグループが表示されます。

2.フォームの作成


2.ストラクステップにログインした状態で、右上のメニューバーの

フォーム > WEBフォームの作成 をクリックします。


3. フォーム作成の必要事項を入力します。

入力項目 入力事項
フォームのタイプ 新規読者登録
フォームの名前 BuzzStike と入力
ダブルオプトインによる登録確認を行いますか? チェックを外す
「登録ありがとう」のメールを送りますか? チェックを外す
フォーム登録完了メールを受信しますか? チェックを外す
フォームのデザインを選択 Classic White(Default)
メルマガの形式 HTML
CAPTCHAによる文字入力認証を行いますか? チェックを外す
リストグループ/カスタムフィールド BuzzStrike にチェックを入れる(表示されるフィールドにはすべてチェックを入れないで下さい)

次へをクリックします。


4.【登録完了画面の設定】は何もいじらずに次へをクリックします。


5. 【エラーページの設定】は何もいじらずに保存をクリックします。


6. 【フォームのHTMLタグを取得】が表示されます。何もせずにそのままOKを押して下さい。

ランディングページのコード変更


1.こちらからアカウント情報を確認し【無料版】ストライクステップにログインします。
(上記リンク先の情報を見る為に会員ログインが必要です。)

2.右上のメニューーの フォーム>フォームの閲覧をクリックします。


3.フォーム名 BuzzStrike のGet HTMLをクリックします。


4.表示されたHTMLタグをすべてコピーし、パソコンのメモ帳などのエディターにペーストして任意の名前を付けて保存しておきます。


5.ランディングページファイル「bs_lp」の中の index.htmlファイルをエディターソフトで開きます。

6.
<!-- フォームエリア -->
 と記述されている部分をエディターの検索機能で探しその部分を表示します。

7.3で保存したフォームのHTMLコードをもう一度開きます。

8. フォームのHTMLコードの
<form method="post" action="http://1stml.com/stm/form.php?form=●●●" id="●●●●●" onsubmit="return CheckForm●●●(this);">
 

と記述されている一行のみをコピーします。(●●●には個別のフォームのコードが入っています)


9.5のフォームエリアの部分の下の
<!-- この部分を変更 -->
のすぐ下の一行のみを
 
 7でコピーしたコードに置き換えます。

10.フォームのHTMLコードのJavascriptの部分
 
<script type="text/javascript">
から
</script>
までをコピーします。


11. 5のフォームエリアの

<!-- ここから下のJavescriptを変更 -->
の一行下から
<!-- /変更Javescriptここまで -->
の一行上までの部分を9でコピーしたコードに置き換えます。

12. フォームエリアの2つの部分を置き換えたらファイルを上書き保存します。

13.変更したindex.htmlをWEBブラウザで開いて表示が崩れていないか確認して下さい。
  (もし崩れている場合は変更箇所を間違えています。もう一度最初からやり直して下さい)

14.WEBブラウザのフォームからテストで1度登録してみて下さい。

15. フォームコードの書き換えが成功している場合は、ストライクステップのリストグループ Buzzstrike にテストのメールアドレスが登録されています。

16.すべて終わったらランディングページのフォルダ(bs_lp)内のすべてのファイルをご自分のサーバーの指定フォルダにアップロードして下さい。

4.中上級者向けランディングページのカスタマイズ


A.カウントダウンのコード

デフォルトではユーザーがブラウザでページにアクセスしてから、24時間のカウントダウン終了後にストライクメールトップページに自動でリダイレクトするようになっています。

もしご自分でカウントダウンの設定をしたい場合は 

<!-- カウントダウンコード -->
のコードが記述してある部分にご自分でコードを記述して下さい。(カウントダウンコードは上と下に2つ入っています)

※iframeでご自分の外部タグを挿入したり、Javascrptで直接記述する場合はレスポンシブデザインが崩れないようにスタイルシートで調整して下さい。

デフォルトでは調整済みとなっています。

もし、24時間が経過してしまって見れないユーザーに再度ページを見せたい場合は、
カウントダウンのコードをコメントアウトさせるか、コードを外したものを再アップロードして見せるようにして下さい。


B.カラースタイルの変更

サイトのカラーテーマのスタイルシートは以下の部分に記述してあります。

<link rel="stylesheet" href="css/theme-red.css”>

色の変更をしたい場合は theme-red.css の部分を以下に置き換えて下さい。

theme-blue.css
theme-teal.css
theme-green.css
theme-red.css
theme-orange.css


C.Boostrap

こちらのランディングページはBootstrapのcss frameworkを使っており、Bootstrapの12-column responsive gridをベースに作られています。カスタマイズの際にはBoostrapのcssと互換性があります。


D.フッターの部分の変更は可能ですが、運営元HPのリンクとPrivacy&Policyの部分は消さないで下さい。

E.ランディングページ内のコンテンツの変更はコンバージョン率の低下に繋がるのでできるだけおやめ下さい。