Plug-in da Adobe: getResponsiveLayout
O plug-in getResponsiveLayout permite que você rastreie a versão do seu site com design responsivo que um visitante está visualizando no momento. A Adobe recomenda usar esse plug-in se o seu site usar um design responsivo e se você quiser rastrear a versão do site exibida por um visitante. Esse plug-in é desnecessário se o site não usar design responsivo.
Instale o plug-in usando a extensão SDK da Web ou SDK da Web.
Este plug-in ainda não é compatível com o SDK da Web.
Instale o plug-in usando a extensão Adobe Analytics.
O Adobe oferece uma extensão que permite usar os plug-ins usados com mais frequência com o Adobe Analytics.
-
Faça logon na Coleção de dados da Adobe Experience Platform usando suas credenciais da Adobe ID.
-
Clique na propriedade de tag desejada.
-
Vá para a guia Extensões e clique no botão Catálogo.
-
Instale e publique a extensão Plug-ins comuns do Analytics.
-
Caso ainda não o tenha feito, crie uma regra denominada "Inicializar plug-ins" com a seguinte configuração:
- Condição: Nenhuma
- Evento: principal – biblioteca carregada (início da página)
-
Adicione à regra acima uma ação com a seguinte configuração:
- Extensão: Plug-ins comuns do Analytics
- Tipo de ação: inicializar getResponsiveLayout
-
Salve e publique as alterações na regra.
Instale o plug-in usando o editor de código personalizado do
Se você não quiser usar a extensão de plug-in de plug-ins comuns do Analytics, poderá usar o editor de código personalizado.
- Faça logon na Coleção de dados da Adobe Experience Platform usando suas credenciais da Adobe ID.
- Clique na propriedade desejada.
- Vá até a guia Extensões e clique no botão Configurar na extensão do Adobe Analytics.
- Expanda a opção Configurar rastreamento usando código personalizado, que revela o botão Abrir editor.
- Abra o editor de código personalizado e cole na janela de edição o código do plug-in fornecido abaixo.
- Salve e publique as alterações na extensão do Analytics.
Instalar o plug-in usando o AppMeasurement
Copie e cole o seguinte código em qualquer lugar no arquivo AppMeasurement depois que o objeto de rastreamento do Analytics for instanciado (usando s_gi). A preservação de comentários e números de versão do código na sua implementação ajuda a Adobe a solucionar possíveis problemas.
/******************************************* 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 ********************************************/
Usar o plug-in
A função getResponsiveLayout usa os seguintes argumentos:
ppw(obrigatório, número inteiro): a largura máxima de pixels que uma janela do navegador pode ter antes que a página alterne do layout no modo retrato de telefone para o layout no modo paisagem de telefoneplw(obrigatório, número inteiro): a largura máxima de pixels que uma janela de navegador pode ter antes que a página alterne de um layout no modo paisagem para um layout de tablettw(obrigatório, inteiro): a largura máxima em pixels que uma janela de navegador pode ter antes que a página mude de um layout de tablet para um layout de desktop
Chamar essa função retorna uma string que contém duas partes delimitadas por dois pontos (:). Dependendo da largura do navegador e dos argumentos acima, a primeira parte da string conterá um dos seguintes valores:
"phone portrait layout""phone landscape layout""phone layout"(para sites que não têm layouts no modo retrato e paisagem)"tablet layout""desktop layout"
A segunda parte da string retornada é a largura e a altura do navegador. Por exemplo, "desktop layout:1243x700".
Exemplos
// 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);
Histórico da versão
1.1 (19 de março de 2021)
- Adição do número da versão como dados de contexto.
1.0 (2 de maio de 2018)
- Versão inicial.