Show Menu
トピック×

Adobeプラグイン:getResponsiveLayout

このプラグインは、Adobe Analyticsからより多くの価値を引き出すのに役立つ、アドビコンサルティングによって提供されます。 アドビカスタマーケアは、インストールやトラブルシューティングを含め、このプラグインに対するサポートを行いません。 このプラグインに関するヘルプが必要な場合は、貴社のアカウントマネージャーにお問い合わせください。 担当コンサルタントとのミーティングを設定できます。
このプ getResponsiveLayout ラグインを使用すると、訪問者が現在閲覧しているレスポンシブデザインベースのWebサイトのバージョンを追跡できます。 サイトでレスポンシブデザインを使用し、訪問者が閲覧したサイトのバージョンを追跡する場合は、このプラグインを使用することをお勧めします。 サイトでレスポンシブデザインを使用しない場合は、このプラグインは不要です。

Adobe Experience Platform Launch Extensionを使用してプラグインをインストールする

アドビでは、最も一般的に使用されるプラグインを使用できる拡張機能を提供しています。
  1. Log in to launch.adobe.com using your AdobeID credentials.
  2. 目的のプロパティをクリックします。
  3. 「拡張子」タブ に移動し 、「カタログ」ボタンをクリッ クします 。
  4. Common Analytics Plugins Extensionのインストールと公開
  5. まだ「Initialize Plug-ins」というルールを作成していない場合は、次の設定を使用してルールを作成します。
    • 条件:なし
    • イベント:コア — ライブラリ読み込み済み(ページの上部)
  6. 次の設定を使用して、上記のルールにアクションを追加します。
    • 拡張子:共通のAnalyticsプラグイン
    • アクションタイプ:getResponsiveLayoutを初期化
  7. ルールに対する変更を保存して発行します。

カスタムコードエディターの起動を使用したプラグインのインストール

プラグイン拡張機能を使用しない場合は、カスタムコードエディターを使用できます。
  1. Log in to launch.adobe.com using your AdobeID credentials.
  2. 目的のプロパティをクリックします。
  3. 「拡張」タブ に移動し 、Adobe Analytics拡張機能の 下にある「設定 」ボタンをクリックします。
  4. 「カスタムコー ドを使用してトラッキングを設定 」アコーディオンを展開すると、「エディターを開く 」ボタンが表示されます。
  5. カスタムコードエディターを開き、下に示すプラグインコードを編集ウィンドウに貼り付けます。
  6. 変更を保存し、Analytics拡張機能に公開します。

AppMeasurementを使用したプラグインのインストール

Analyticsトラッキングオブジェクトをインスタンス化した後(を使用して)、AppMeasurementファイルの任意の場所に次のコードをコピーして貼り付 s_gi けます。 コードのコメントとバージョン番号を実装に保持しておくと、アドビは潜在的な問題のトラブルシューティングに役立ちます。
/******************************************* BEGIN CODE TO DEPLOY *******************************************/
/* Adobe Consulting Plugin: getResponsiveLayout v1.0 */
var getResponsiveLayout=function(ppw,plw,tw){if(!(isNaN(ppw)||isNaN(plw)||isNaN(tw)||plw<ppw||tw<plw)){var b=window.innerWidth|| document.documentElement.clientWidth||document.body.clientWidth;return(ppw<plw&&b<=plw?b<=ppw?"phone portrait layout":"phone landscape layout":b<=plw?"phone layout":b<=tw?"tablet layout":"desktop layout")+":"+b+"x"+(window.innerHeight|| document.documentElement.clientHeight||document.body.clientHeight)}};
/******************************************** END CODE TO DEPLOY ********************************************/

プラグインの使用

このメソ getResponsiveLayout ッドでは、次の引数を使用します。
  • ppw (必須、整数):ページがスマートフォンの縦置きレイアウトからスマートフォンの横置きレイアウトに切り替わる前に、ブラウザーウィンドウに表示できる最大幅(ピクセル単位)
  • plw (必須、整数):ページがスマートフォンの横置きレイアウトからタブレットベースのレイアウトに切り替わる前に、ブラウザーウィンドウに表示できる最大幅のピクセル数です
  • tw (必須、ブール値):ページがタブレットレイアウトからデスクトップベースのレイアウトに切り替わる前に、ブラウザーウィンドウに表示できるピクセルの最大幅です。
このメソッドを呼び出すと、2つの部分を含む文字列が返されます。 最初の部分では、ブラウザーの幅と上記の引数に応じて、次の値が使用されます。
  • "phone portrait layout"
  • "phone landscape layout"
  • "phone layout" (縦置きと横置きの両方のレイアウトを持たないサイトの場合)
  • "tablet layout"
  • "desktop layout"
返される文字列の2番目の部分は、ブラウザーの幅と高さの寸法です。 例: "desktop layout:1243x700"

呼び出しの例

例1

...
  • ブラウザーの幅が500ピクセルを超える場合、サイトはスマートフォンの縦置きモードからスマートフォンの横置きモードに切り替わります
  • ブラウザーの幅が700ピクセルを超える場合、サイトはスマートフォンの横置きモードからタブレットモードに切り替わります。
  • ブラウザーの幅が1000ピクセルを超える場合、サイトのモードがタブレットモードからデスクトップモードに切り替わる
...次のコードは、eVar10を、訪問者のエクスペリエンスとしての現在のレスポンシブデザインレイアウト、およびブラウザーの幅とサイズに等しく設定します
s.eVar10 = getResponsiveLayout(500, 700, 1000);

例2

...
  • サイトにはスマートフォンモード、タブレットモード、デスクトップモードのみがある
  • ブラウザーの幅が500ピクセルを超える場合、サイトのモードがスマートフォンモードからタブレットモードに切り替わります
  • ブラウザーの幅が1,100ピクセルを超える場合、サイトのモードがタブレットモードからデスクトップモードに切り替わります。
...次のコードは、eVar10を、訪問者のエクスペリエンスとしての現在のレスポンシブデザインレイアウト、およびブラウザーの幅とサイズに等しく設定します
s.eVar10 = getResponsiveLayout(500, 500, 1100);

バージョン履歴

1.0(2018年5月2日)

  • 初回リリース。