【2025年】Shopifyで画像LPを実現する方法は？おすすめアプリも紹介！

はじめに
Shopify で画像 LP は必要？
画像 LP を表示するメリット
画像 LP を表示するデメリット
Shopify で画像 LP を表示する方法
- テーマのコード編集による実装
- アプリを利用した実装
テーマコード編集で実装する場合
アプリを利用して実装する場合
- アプリ利用のメリットと留意点
おすすめアプリ「シンプル画像 LP ｜お手軽画像ランディングページ」
- 「シンプル画像 LP ｜お手軽画像ランディングページ」の特徴
- 主要機能の詳細
「シンプル画像 LP ｜お手軽画像ランディングページ」のインストール手順
どちらの方法を選ぶべきか？判断基準
画像 LP 導入後の活用術
運用時の注意点とトラブルシューティング
まとめ
参考記事

はじめに

2025 年現在、EC ストア運営において画像 LP（ランディングページ）は顧客の購買決定を大きく左右する重要なマーケティングツールとなりました。特に視覚的インパクトを重視するキャンペーンやプロモーションにおいて、画像 LP は商品の魅力を最大限に伝え、コンバージョン率を向上させる効果的な施策として注目されています。本記事では Shopify ストアに画像 LP を実装する方法を徹底解説します。

Shopifyで画像LPを実装した商品ページのスクリーンショット。美しい画像レイアウトで商品の魅力を効果的に表現している

「テーマのコード編集で自力実装する方法」と「アプリを使ってノーコードで導入する方法」の両面からメリット・デメリットを詳しく比較し、さらにおすすめアプリ**「シンプル画像 LP ｜お手軽画像ランディングページ」**の使い方もステップバイステップで紹介します。売上向上を実現したい方は、ぜひ最後までご覧ください。

今回は、以下の記事を参考にしています。

Shopify で画像 LP は必要？

現代の E コマースにおいて、顧客の注意を引き付け、短時間で商品の魅力を伝えることは極めて重要です。通常の商品ページでは表現しきれない特別感やストーリー性を演出する画像 LP は、以下のような場面で威力を発揮します。

顧客が画像 LP を通じて商品やキャンペーンの情報を視覚的に理解することで、次のような心理効果が生まれます：

瞬間的な理解促進 - 画像により商品の魅力を一目で伝達
感情的な購買動機の創出 - ビジュアルストーリーテリングによる情緒的な訴求
ブランドイメージの向上 - 統一されたデザインでブランド価値を演出
コンバージョン率の改善 - 明確な CTA と組み合わせた効果的な導線設計

実際に画像 LP を導入したストアでは、通常の商品ページと比較してコンバージョン率の 20-40%向上、滞在時間の 30-50%延長という成果が報告されています。

画像 LP を表示するメリット

視覚的インパクトによる訴求力向上

画像 LP の最大の効果は視覚的インパクトによる強力な訴求力です。テキストだけでは伝えきれない商品の魅力や使用シーンを、大型の画像や動画で効果的に表現できます。特に、ファッションアイテム、食品、ライフスタイル商品などでは、商品の質感や雰囲気を視覚的に伝えることで購買意欲を大幅に向上させることができます。

ブランドストーリーの効果的な展開

画像 LP を通じて、単なる商品紹介を超えたブランドストーリーの展開が可能になります。商品の開発背景、ブランドの理念、使用シーンの提案などを、魅力的なビジュアルとともに順序立てて伝えることで、顧客との深い感情的つながりを築くことができます。

キャンペーンやイベントの特別感演出

期間限定セールや新商品発売、季節のイベントなどにおいて、画像 LP は特別感と緊急性を効果的に演出します。通常の商品ページでは表現できない華やかさや限定感を視覚的に訴求することで、顧客の購買行動を促進できます。

モバイルユーザーへの最適化

スマートフォンでの購買が主流となった現在、画像 LP はモバイルファーストの設計により、小さな画面でも効果的に情報を伝達できます。スクロールしながら順次情報を表示する縦型レイアウトは、モバイルユーザーの閲覧体験に最適化されています。

魅力的な画像 LP はSNS でのシェアを促進し、オーガニックな拡散効果を生み出します。Instagram やフェイスブック、Twitter などでシェアされやすいビジュアルコンテンツとして機能し、新規顧客獲得のきっかけとなります。

画像 LP を表示するデメリット

制作コストと時間の投資

高品質な画像 LP の制作には、デザイン費用と時間投資が必要です。プロの写真撮影、グラフィックデザイン、コピーライティングなどの専門スキルが求められる場合があり、初期投資が高額になる可能性があります。

ページ読み込み速度への影響

大容量の画像や動画を多用する画像 LP は、ページの読み込み速度に影響を与える可能性があります。特にモバイル環境や通信速度の遅い地域からのアクセスでは、表示遅延がユーザー体験を損ない、離脱率の増加につながるリスクがあります。

SEO 対策の難しさ

画像中心のコンテンツは、検索エンジンによるテキスト情報の認識が困難です。適切な alt 属性の設定、構造化データの実装、テキストコンテンツの併用など、SEO 対策により多くの配慮が必要となります。

更新・メンテナンスの複雑さ

画像 LP の更新には、画像の差し替えやデザインの調整が必要で、通常の商品ページ更新より複雑です。価格変更やキャンペーン終了時の対応、季節に応じたデザイン変更など、継続的なメンテナンス体制の構築が重要です。

デバイス間の表示調整

PC、タブレット、スマートフォンなど異なるデバイスでの最適表示を実現するには、レスポンシブデザインの実装が必須です。デバイスごとの画像サイズ調整や、レイアウトの最適化に追加の工数が必要となります。

Shopify で画像 LP を表示する方法

Shopify で画像 LP を表示する方法は、主に 2 つのアプローチがあります。それぞれの特徴と適したユーザー像を詳しく解説していきます。

テーマのコード編集による実装

Shopifyテーマエディタでのコード編集画面。Liquidテンプレートファイルを直接編集して画像LPを実装する様子

この方法は、Shopify のテーマファイルを直接編集して実装するアプローチです。完全無料で導入できるうえ、デザインや動作のカスタマイズ自由度が非常に高く、外部サービスへの依存もないため安定した運用が可能です。ただし、テーマのアップデート時に上書きされる可能性があり、技術的な知識が必要なため実装に時間がかかるというデメリットがあります。

メリット：

完全無料で実装可能
デザインと機能を自由にカスタマイズ
外部依存がなく安定運用
ブランドに完全にマッチしたデザイン実現
パフォーマンスの最適化が可能

デメリット：

Liquid/CSS/JS の技術知識が必要
テーマ更新時の上書きリスク
実装とメンテナンスに時間がかかる
デバッグとトラブルシューティングが複雑
レスポンシブ対応の手動実装が必要

Liquid/CSS/JS の知識がある方や、開発を外注できる環境がある方、完全なカスタマイズを求める方に適していると言えるでしょう。

アプリを利用した実装

Shopifyアプリストアでの画像LPアプリ検索結果画面。複数のアプリが表示され、評価や機能を比較できる

Shopify アプリストアで提供されている専用アプリを使用する方法です。ノーコードで数分程度で導入可能で、直感的な UI からデザインの変更が可能なうえ、定期的なアップデートで新機能が追加されるという利点があります。

メリット：

ノーコードで数分程度で導入完了
直感的な UI でデザイン変更が簡単
定期的なアップデートと新機能追加
開発元によるサポート体制
テーマ更新の影響を受けにくい
自動レスポンシブ対応

デメリット：

月額費用が発生（通常$10-50 程度）
他のアプリとの競合リスク
カスタマイズの自由度に制限
アプリ数増加によるストア管理の複雑化
外部サービス依存のリスク

時間を節約したい方や、技術的な知識に自信がない方、安定した運用を重視する方におすすめの方法です。

テーマコード編集で実装する場合

事前準備

実装前に以下の準備を行ってください：

公開テーマの複製
公開中のテーマを複製しておくことで、安全に作業を行うことができます。
画像ファイルの準備
LP 用の画像ファイルを事前に用意し、Shopify の「設定 > ファイル」からアップロードしておきます。
ページ設計の確定
画像 LP の構成、レイアウト、CTA ボタンの配置などを事前に設計しておきます。

基本的な画像 LP 実装コード

以下は基本的な画像 LP の実装コードです：

<!-- ▼ 画像LPここから ▼ -->
<section class="ur-image-lp" id="ur-image-lp">
  <div class="ur-lp-container">

    <!-- メイン画像セクション -->
    <div class="ur-lp-main-image">
      <img src="{{ 'lp-main-image.jpg' | asset_url }}"
           alt="メイン商品画像"
           class="ur-main-img">
      <div class="ur-main-overlay">
        <h1 class="ur-main-title">特別限定キャンペーン</h1>
        <p class="ur-main-subtitle">今だけの特別価格でご提供</p>
      </div>
    </div>

    <!-- 商品説明セクション -->
    <div class="ur-lp-content">
      <div class="ur-content-block">
        <img src="{{ 'lp-feature-1.jpg' | asset_url }}"
             alt="商品特徴1"
             class="ur-feature-img">
        <div class="ur-feature-text">
          <h2>特徴1：高品質素材</h2>
          <p>厳選された素材を使用し、長期間ご使用いただけます。</p>
        </div>
      </div>

      <div class="ur-content-block">
        <img src="{{ 'lp-feature-2.jpg' | asset_url }}"
             alt="商品特徴2"
             class="ur-feature-img">
        <div class="ur-feature-text">
          <h2>特徴2：独自デザイン</h2>
          <p>オリジナルデザインで他にはない特別感を演出。</p>
        </div>
      </div>
    </div>

    <!-- CTA（コールトゥアクション）セクション -->
    <div class="ur-lp-cta">
      <img src="{{ 'lp-cta-bg.jpg' | asset_url }}"
           alt="購入促進画像"
           class="ur-cta-bg">
      <div class="ur-cta-overlay">
        <h3 class="ur-cta-title">今すぐ特別価格で購入</h3>
        <p class="ur-cta-price">
          <span class="ur-original-price">通常価格: ￥9,800</span>
          <span class="ur-sale-price">特別価格: ￥6,980</span>
        </p>
        <button class="ur-cta-button" onclick="addToCart()">
          今すぐ購入する
        </button>
      </div>
    </div>

  </div>
</section>

<script>
function addToCart() {
  // 商品をカートに追加する処理
  let variantId = {{ product.selected_or_first_available_variant.id }};

  let formData = {
    'items': [{
      'id': variantId,
      'quantity': 1
    }]
  };

  fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(formData)
  })
  .then(response => response.json())
  .then(data => {
    // カート追加成功時の処理
    alert('商品をカートに追加しました！');
    window.location.href = '/cart';
  })
  .catch((error) => {
    console.error('Error:', error);
    alert('エラーが発生しました。もう一度お試しください。');
  });
}
</script>

<style>
.ur-image-lp {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.ur-lp-container {
  width: 100%;
  margin: 0 auto;
}

/* メイン画像セクション */
.ur-lp-main-image {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.ur-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ur-main-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2;
}

.ur-main-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.ur-main-subtitle {
  font-size: 1.5rem;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* コンテンツセクション */
.ur-lp-content {
  width: 100%;
}

.ur-content-block {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 400px;
}

.ur-content-block:nth-child(even) {
  flex-direction: row-reverse;
}

.ur-feature-img {
  flex: 1;
  width: 50%;
  height: 400px;
  object-fit: cover;
}

.ur-feature-text {
  flex: 1;
  padding: 3rem;
  background-color: #f8f9fa;
}

.ur-feature-text h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #333;
}

.ur-feature-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #666;
}

/* CTAセクション */
.ur-lp-cta {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.ur-cta-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ur-cta-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2;
}

.ur-cta-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.ur-cta-price {
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

.ur-original-price {
  text-decoration: line-through;
  color: #ccc;
  margin-right: 1rem;
}

.ur-sale-price {
  color: #ff4444;
  font-weight: bold;
  font-size: 1.5rem;
}

.ur-cta-button {
  background: linear-gradient(135deg, #ff6b6b, #ff4444);
  color: white;
  border: none;
  padding: 1rem 3rem;
  font-size: 1.3rem;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
}

.ur-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .ur-main-title {
    font-size: 2rem;
  }

  .ur-main-subtitle {
    font-size: 1.2rem;
  }

  .ur-content-block {
    flex-direction: column !important;
    min-height: auto;
  }

  .ur-feature-img {
    width: 100%;
    height: 250px;
  }

  .ur-feature-text {
    padding: 2rem 1.5rem;
  }

  .ur-feature-text h2 {
    font-size: 1.5rem;
  }

  .ur-cta-title {
    font-size: 1.8rem;
  }

  .ur-cta-button {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
  }
}
</style>
<!-- ▲ 画像LPここまで ▲ -->

カスタマイズのポイント

画像の最適化

WebP 形式の使用で読み込み速度向上
レスポンシブ画像の実装（srcset 属性の活用）
適切な alt 属性の設定で SEO 対策

CTA ボタンの最適化

目立つ色とデザインで視認性向上
ホバーアニメーションで操作感向上
クリック時のフィードバック実装

パフォーマンス最適化

画像の遅延読み込み（lazy loading）実装
CSS と JavaScript の最小化
キャッシュ戦略の最適化

テストと公開前チェックリスト

PC・モバイル両環境での表示確認
異なるブラウザでの動作テスト
画像の読み込み速度測定
CTA ボタンの動作確認
SEO 要素（メタタグ、構造化データ）の確認

アプリを利用して実装する場合

アプリ利用のメリットと留意点

項目	メリット	注意点
設定時間	数分で完了	月額コストが発生
デザイン変更	GUI で直感操作	カスタマイズの自由度に制限
メンテナンス	自動アップデート	他のアプリとの競合リスク
サポート	開発元による対応	アプリ数が多いと管理が煩雑
技術要件	技術知識不要	外部サービス依存のリスク

アプリを選択する際は、以下の点を確認することが重要です：

機能面のチェックポイント

ドラッグアンドドロップエディタの有無
レスポンシブデザイン対応
カスタム CTA ボタンの設定可能性
動画コンテンツ対応の有無
A/B テスト機能の提供

技術面のチェックポイント

使用しているテーマとの互換性
ページ速度への影響度
SEO 対応状況
サポート体制と更新頻度
セキュリティ対策の実装状況

「シンプル画像 LP ｜お手軽画像ランディングページ」のインストール手順

アプリのインストール

実際に「シンプル画像 LP ｜お手軽画像ランディングページ」をインストールして設定する手順を解説します。

詳細な説明は公式のご利用ガイドを参照ください。ここでは、インストールからカスタマイズまでを簡単に解説します。

Shopify アプリストアで「シンプル画像 LP ｜お手軽画像ランディングページ」と検索してください。もしくはこちらのリンクからアプリ詳細ページへアクセスしてください。

Shopifyアプリストアでのシンプル画像LPアプリの検索結果。アプリの詳細情報、評価、価格が表示されている

アプリの詳細ページから「インストール」をクリックしてストアにインストールします。

シンプル画像LPアプリの詳細ページ。インストールボタンが目立つ位置に配置されており、簡単にインストールできる

Shopify の管理画面で再度権限の確認などがあります。問題なければ、「インストール」ボタンでインストールを完了してください。

Shopify管理画面でのアプリインストール権限確認画面。必要な権限が一覧で表示され、安全にインストールできる

アプリ管理画面の表示インストール完了後、アプリの管理画面が表示されます。

この段階で、7 日間の無料トライアルが始まります。無料期間のうちに一通りの機能を試してみて、自社ストアに合うかどうか判断しましょう。

テーマへのアプリブロック追加

アプリをカスタマイズするには、まずテーマにアプリブロックを追加する必要があります。

自動追加の場合
アプリ管理画面の「テーマに画像 LP を追加」から「テーマを選択」でアプリブロックを追加したいテーマを選択し、「テーマに追加」ボタンをクリックします。

シンプル画像LPアプリの管理画面。テーマ選択とアプリブロック追加の設定画面が表示されている

手動追加の場合
テーマエディタから「セクションを追加」または「ブロックを追加」をクリックし、「アプリ」タブから必要なブロックを選択して追加します。

Shopifyテーマエディタでのアプリブロック追加画面。セクション追加メニューからアプリタブを選択してブロックを追加する様子

基本的なカスタマイズ設定

テーマにアプリブロックを追加したら、カスタマイズ画面から「シンプル画像 LP ｜お手軽画像ランディングページ」のカスタマイズを行えます。

LP 画像ブロックの設定

画像の設定

LP 画像（PC）：PC 表示用の画像を選択
LP 画像（スマホ）：スマホ表示用の画像を選択
画像のサイズ：表示サイズオプションから選択

リンクの設定

リンク：画像クリック時の遷移先 URL
遷移先リンクの開き方：タブの開き方を選択

デザインの調整

背景色：透明または任意の色を設定
余白：上下左右の余白を細かく調整

固定ボタンの設定

今すぐ購入ボタンの場合

商品選択：購入対象商品の指定
ボタンラベル：販売可能時・売り切れ時のテキスト
スタイル：サイズ、色、フォントの調整
コンテナ設定：背景色、余白、影の設定

画像ボタンの場合

ボタン画像：PC・スマホ別の画像設定
リンク設定：クリック時の遷移先
表示設定：サイズや位置の調整

テーマのデフォルトスタイル調整

LP の表示を最適化するため、テーマのデフォルト設定を調整します：

セクションの余白設定
「セクションの余白をテーマと同じにする」を無効化
アニメーション設定
「スクロールでセクションを表示する」を無効化

これにより、画像 LP を画面いっぱいに表示でき、固定ボタンも正常に表示されるようになります。

どちらの方法を選ぶべきか？判断基準

選択の判断は以下の基準で行うことをおすすめします：

コード編集を選ぶべき場合

技術リソースがある場合

開発者が社内にいる、または外注予算がある
Liquid、CSS、JavaScript の知識がある
定期的なメンテナンスを行える体制がある

完全なカスタマイズが必要な場合

ブランド独自のデザイン要求が強い
特殊な機能や動作が必要
他のシステムとの連携が必要
パフォーマンスの完全制御が必要

コスト重視の場合

月額料金を抑えたい
長期運用でのコスト最適化を重視
複数ストアでの横展開を予定している

アプリ利用を選ぶべき場合

スピード重視の場合

新商品の販売開始など時間制約がある
すぐに効果を検証したい
開発リソースを他の施策に集中したい

安定性重視の場合

テーマ更新への対応を自動化したい
サポート体制を重視する
非技術者でも運用・変更できる体制が必要

テスト運用から始めたい場合

まず効果を確認してから本格導入したい
A/B テストを手軽に実施したい
リスクを最小化して導入したい

ハイブリッド運用の提案

効果的なアプローチとして、以下の段階的導入も検討できます：

Phase 1: アプリで効果検証（1-3 ヶ月）
Phase 2: 効果確認後、必要に応じてコード実装に移行
Phase 3: 独自機能の追加と最適化

この方法により、初期リスクを抑えながら最終的にコスト最適化を実現できます。

画像 LP 導入後の活用術

コンテンツマーケティングとの連携

ストーリーテリングの強化

ブランドの歴史や理念を視覚的に表現
商品開発の背景ストーリーの展開
顧客の使用体験談の魅力的な紹介
季節やイベントに合わせたテーマ展開

SNS マーケティングとの統合

Instagram 投稿との連動デザイン
ハッシュタグキャンペーンとの連携
インフルエンサーとのコラボレーション企画
ユーザー生成コンテンツ（UGC）の活用

A/B テストによる最適化

デザイン要素のテスト

パターンA: シンプルな単色背景
パターンB: グラデーション背景
パターンC: テクスチャ背景

CTA ボタンの最適化

ボタンの色（赤 vs 青 vs 緑）
ボタンのサイズ（大 vs 中 vs 小）
ボタンの文言（「今すぐ購入」vs「詳細を見る」）
ボタンの配置（上部 vs 中央 vs 下部）

コンテンツ構成のテスト

画像の順序や配置
テキスト量の調整
価格表示方法の変更
特典や保証の強調度合い

季節・イベント対応戦略

期間限定キャンペーンの活用

クリスマス、バレンタイン、母の日などの特別デザイン
決算セール、年末年始の限定オファー
新商品発売記念の特別 LP
在庫処分セールの緊急感演出

コンテンツの動的変更

// 季節に応じた背景色変更の例
const seasonalThemes = {
  spring: { bg: '#ffebee', accent: '#e91e63' },
  summer: { bg: '#e3f2fd', accent: '#2196f3' },
  autumn: { bg: '#fff3e0', accent: '#ff9800' },
  winter: { bg: '#fafafa', accent: '#607d8b' },
};

顧客セグメント別の最適化

新規顧客向け

初回購入の特典強調
ブランド紹介の充実
安心・安全の保証表示
お試し価格の訴求

リピート顧客向け

VIP 限定オファーの提示
新商品の先行紹介
ポイント還元の強調
継続利用特典の案内

高額商品購入者向け

プレミアムサービスの提案
限定品や特別仕様の紹介
パーソナライゼーション要素の追加
アフターサービスの充実度アピール

運用時の注意点とトラブルシューティング

よくある問題と解決策

画像が表示されない場合

ファイル形式の確認: WebP、JPEG、PNG などサポートされた形式を使用
ファイルサイズの確認: 大容量ファイルは圧縮または分割
パスの確認: 画像 URL が正しく設定されているか確認
キャッシュの削除: ブラウザキャッシュをクリアして再表示

レスポンシブ表示の問題

CSS メディアクエリの確認: 適切なブレークポイントの設定
画像サイズの調整: デバイス別の最適サイズ設定
フォントサイズの調整: 読みやすさを維持する適切なサイズ
ボタン配置の最適化: タップしやすい位置とサイズの確保

ページ速度の問題

画像最適化: 適切な圧縮率での画像書き出し
遅延読み込み: lazy loading の実装
CDN の活用: 画像配信の高速化
不要なコードの削除: 未使用 CSS/JS の除去

パフォーマンス最適化

画像最適化の実践

<!-- レスポンシブ画像の実装例 -->
<picture>
  <source media="(max-width: 768px)" srcset="mobile-image.webp" type="image/webp" />
  <source media="(max-width: 768px)" srcset="mobile-image.jpg" type="image/jpeg" />
  <source srcset="desktop-image.webp" type="image/webp" />
  <img src="desktop-image.jpg" alt="商品画像" loading="lazy" />
</picture>

Critical CSS の実装

Above-the-fold 部分の CSS を優先読み込み
残りの CSS を非同期読み込み
未使用 CSS の除去
CSS 圧縮の実施

セキュリティ対策

データ保護の実装

顧客情報の適切な暗号化
不正アクセス防止の仕組み
定期的なセキュリティ更新
バックアップ体制の構築

コンテンツ保護

画像の無断転用防止
コピーライト表示の適切な配置
ウォーターマークの活用検討
利用規約の明確化

アナリティクス設定

成果測定の指標設定

ページビュー数とユニークビジター数
滞在時間と直帰率
コンバージョン率と CTA クリック率
モバイル vs PC の利用状況

GTM を使用した詳細分析

// CTAボタンクリックの追跡例
document.querySelector('.ur-cta-button').addEventListener('click', function () {
  gtag('event', 'click', {
    event_category: 'Image LP',
    event_label: 'CTA Button',
    value: 1,
  });
});