This plug-in is provided by Adobe Consulting as a courtesy to help you get more value out of Adobe Analytics. Adobe Customer Care does not provide support with this plug-in, including installation or troubleshooting. If you require help with this plug-in, contact your organization’s Adobe Account Team. They can arrange a meeting with a consultant for assistance.
The getResponsiveLayout
plug-in lets you track which version of your responsive design-based website a visitor is currently looking at. Adobe recommends using this plug-in if your site uses responsive design and you want to track the version of the site viewed by a visitor. This plug-in is unnecessary if your site does not use responsive design.
This plug-in is not yet supported for use within the Web SDK.
Adobe offers an extension that allows you to use most commonly-used plug-ins with Adobe Analytics.
If you do not want to use the Common Analytics Plugins plug-in extension, you can use the custom code editor.
Copy and paste the following code anywhere in the AppMeasurement file after the Analytics tracking object is instantiated (using s_gi
). Preserving comments and version numbers of the code in your implementation helps Adobe with troubleshooting any potential issues.
/******************************************* BEGIN CODE TO DEPLOY *******************************************/
/* Adobe Consulting Plugin: getResponsiveLayout v1.1 (Requires AppMeasurement) */
var getResponsiveLayout=function(ppw,plw,tw){var c=ppw,b=plw,e=tw;if("-v"===c)return{plugin:"getResponsiveLayout",version:"1.1"};a:{if("undefined"!==typeof window.s_c_il){var a=0;for(var d;a<window.s_c_il.length;a++)if(d=window.s_c_il[a],d._c&&"s_c"===d._c){a=d;break a}}a=void 0}"undefined"!==typeof a&&(a.contextData.getResponsiveLayout="1.1");if(!(isNaN(c)||isNaN(b)||isNaN(e)||b<c||e<b))return a=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,(c<b&&a<=b?a<=c?"phone portrait layout":"phone landscape layout":a<=b?"phone layout":a<=e?"tablet layout":"desktop layout")+":"+a+"x"+(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)};
/******************************************** END CODE TO DEPLOY ********************************************/
The getResponsiveLayout
function uses the following arguments:
ppw
(required, integer): The maximum width of pixels a browser window can have before the page switches from a phone portrait layout to a phone landscape-based layoutplw
(required, integer): The maximum width of pixels a browser window can have before the page switches from a phone landscape layout to a tablet-based layouttw
(required, integer): The maximum width of pixels a browser window can have before the page switches from a tablet layout to a desktop-based layoutCalling this function returns a string containing two parts delimited by a colon (:
). The first part of the string contains one of the following values, depending on the browser’s width and the above arguments:
"phone portrait layout"
"phone landscape layout"
"phone layout"
(for sites that don’t have both portrait and landscape layouts)"tablet layout"
"desktop layout"
The second part of the returned string is the browser’s width and height dimensions. For example, "desktop layout:1243x700"
.
// A visitor accesses your site on their laptop. The browser window is maximized.
// * Your site switches from phone portrait mode to phone landscape mode when the browser width is greater than 500 pixels
// * Your site switches from phone landscape mode to tablet mode when the browser width is greater than 700 pixels
// * Your site switches from tablet mode to desktop mode when the browser width is greater than 1000 pixels
// Sets eVar10 to "desktop layout:1920x937".
s.eVar10 = getResponsiveLayout(500, 700, 1000);
// A visitor accesses your site on their phone.
// * Your site has only a phone mode, a tablet mode, and a desktop mode
// * Your site switches from phone mode to tablet mode when the browser width is greater than 800 pixels
// * Your site switches from tablet mode to desktop mode when the browser width is greater than 1,100 pixels
// Sets eVar10 to "phone portrait layout:720x1280"
s.eVar10 = getResponsiveLayout(800, 800, 1100);