アプリの存在をサイト内で伝える手段が乏しかった
ECサイトから自社スマートフォンアプリへユーザーを誘導したい事業者向けに、閲覧環境に応じて表示を切り替えるアプリ誘導バナーを開発しました。 ブログテンプレート、目次、パンくず、アプリ誘導導線。ブランド独自の見せ方とSEOの内部構造を両立する機能を開発しています。
CHALLENGES
抱えていた課題
着手前に整理した、解くべき課題です。ここが決まらないまま作り始めると、あとから作り直すことになります。
アプリの存在をサイト内で伝える手段が乏しかった
PCとスマートフォンで同じ訴求を出しても効果が薄かった
iOS・Androidでストアの誘導先が異なり管理が煩雑だった
WHAT WE BUILT
つくったもの
課題に対して実際に設計・実装した内容です。
閲覧環境の判定
ユーザーエージェントを判定し、スマートフォン利用時にのみバナーを表示します。
OS別ストア誘導の実装
iOS・Androidを判定し、それぞれ対応するアプリストアへ自動的にリンクします。
表示条件の設定
特定ページのみ表示・一定期間非表示にするなど、表示条件を管理画面から設定できるようにしました。
SCOPE & TECHNOLOGY
対応範囲と技術
TECHShopify LiquidJavaScriptTheme App Extension
PROCESS
進め方
この案件で実際にたどった流れです。
要件整理
「自社スマートフォンアプリへユーザーを誘導したい事業者」の現場でどう使われるかを起点に、必要な機能範囲を洗い出します。
設計
Theme App Extension（Liquid + JS）として実装する構成に落とし込み、データ構造を設計します。
実装
閲覧環境判定・OS別ストア誘導・表示条件設定を中心に、ストアフロントと管理画面の両方を実装します。
検証・リリース
実際の購入導線で動作検証を行い、問題がないことを確認してから反映します。
OUTCOME
できるようになったこと
実装後の状態を、事実ベースで整理しています。
ECサイトから自社アプリへの導線ができた
OSごとに適切なストアへ誘導できるようになった
表示条件を事業者側で調整できるようになった
CONTACT
つくりたいものを聞かせてください。
Shopifyでの新規構築、既存テーマへの機能追加、アプリ開発のご相談まで。まだ具体化していないアイデアも、整理するところから一緒に始めます。
メールで相談する