採用率との関係性
オファー案件によっては、テスト対象URLが単体ではなく複数ページ存在する場合がございます。
その場合、ご投稿いただいくデザイン案が複数ページで意図通り反映されている必要があり、
それを確認するためエディターに設定されているURLの他、オリエンシートに検証URL(テスト用URL/パターン)が記載されています。
検証URLで不具合が起きNGになりますと、せっかく素敵なデザインをご投稿いただいても修正と再チェックが嵩み、
ラウンドで利用されるまでの時間が伸びてしまいます。
「次ラウンド用のデザイン案」に反映されるまでの時間短縮もまた、
グロースハッカーとカスタマーの信頼関係を築くきっかけになると考えております。
チェックポイント
- 検証URL「テスト用URL/パターン」を全て確認
- 不具合を発見したらGoogle Chromeのデベロッパーツールで原因調査
- 原因がわからなかった場合は、左下の「チャットでサポートに問い合わせ」、又はお問い合わせフォームから弊社テクニカルサポートへ相談
チェック方法
前提:デザイン投稿前の検証URLチェック
- オリエンシートの該当スライド「テスト用URL/パターン」を全て開く
- 各URLの最後尾にデザイン案の変数「?_kz_digest=XXX」か「&_kz_digest=XXX」を追加し、ページを再度読み込む
ヘルプページ:プレビュー用のパラメータを付与してデザイン案を確認する方法 - ページ全体が意図通りのデザインになっているかを確認
- もし不具合を発見した場合、Googleデベロッパーツールで該当箇所のHTML要素を確認
- 要素に対しどのような操作が行われているかをエディタのCSS / JavaScriptタブで確認
- 誤った操作を確認できた場合、意図通りのデザインになるようソースコードを修正
(下記 ↓ JavaScriptを使った改善案で解説) - 再度プレビューURLを生成し、デザイン案の変数を各ページに追加し確認
- 「6.」で誤った操作を確認できなかった場合、弊社テクニカルサポートへ相談
JavaScriptを使った改善案
誤った操作を確認できた場合、意図通りのデザインになるようソースコードを修正
×
$(".pack_detail > h3").replaceWith("<h3>\n\t\t【公式HPベストレート】スタンダードグルメバイキングプラン\n\t\t</h3><p>ご予約受付中</p>");
複数ページを対象とするオファーの場合、エディタのコンテキストメニューで要素を追加しますとreplaceWithを使ったJavaScript文が自動生成され、h3タグ内が上記文言に固定で上書かれるため、同じ文言が他のページにも表示されてしまいます。
ヘルプページ:UI エディターがGUI操作時に生成するJavaScriptコードについて
外部サイト:replaceWithリファレンスとは
○
$('#contents > .pack_detail > h3').after('<p>ご予約受付中</p>');
上記のように、afterを使って直接JavaScript文を記載することで、複数ページを対象とするオファーでも、h3タグ内を固定することなく、必要な要素のみを追加することが出来ます。
ヘルプページ:デザイン崩れを防ぐためのセレクターの選び方
外部サイト:afterリファレンスとは
採用率を上げる・修正を減らすTips
- 第1弾「投稿前の検証URLチェックが、採用率を上げる!?」
- 第2弾「オリエンシートのレスポンシブ表記に迫る」
- 第3弾「気づくと築く、投稿前のプレビュー表示」
- 第4弾「ブラウザ幅のブレイクポイントとは!?」
- 第5弾「アコーディオン要素に潜む落とし穴」
- 第6弾「JSで差をつける入力フォーム改善」
0 コメント