Cómo crear diseños de tiendas personalizados

Google Play administrado te permite diseñar y crear diseños de tiendas para tus clientes empresariales. Para personalizar el diseño de una tienda, puedes agrupar las apps en clústeres, configurar las páginas de la tienda y agregar vínculos rápidos que faciliten el acceso a varias páginas dentro de la tienda.

Todas las apps que están disponibles para un usuario final en Google Play Store administrado primero deben ser aprobadas por un administrador, aprobadas para el usuario y agregadas a un clúster. (Consulta Cómo agregar apps a un diseño de tienda para obtener más detalles sobre este proceso).

Elementos del diseño de una tienda

Por lo general, un diseño de tienda consta de una serie de páginas que se muestran a los usuarios en Google Play administrado. Cada página puede contener uno o más grupos de apps, denominados clústeres. Cada clúster contiene una o más apps.

Los clústeres te permiten agrupar apps relacionadas. Por ejemplo, puedes crear una página para apps relacionadas con el trabajo que contenga un clúster de Essentials y un clúster de Getting Things. El clúster de Essentials podría contener apps como Notepad+ y Presentaciones de Google, entre otras. El clúster de Getting Things Done podría incluir apps como OneNote, Wunderlist, Any.do y otras apps de seguimiento, calendario y planificación de reuniones (consulta la Figura 1).

Cuando creas una página, también puedes agregar hasta 10 vínculos rápidos en la parte superior. Los vínculos rápidos permiten a los usuarios saltar fácilmente a otras páginas. Por ejemplo, en la Figura 1, se muestran vínculos rápidos a las páginas de Negocios, Comunicaciones y Finanzas.

En la Figura 1, se muestran algunos de los elementos clave del diseño de una tienda tal como se ve en un dispositivo:

Pantalla de muestra del dispositivo de un usuario, que muestra los elementos del diseño de una tienda, incluidos los vínculos rápidos, las páginas y los clústeres de apps.
  • Vínculos rápidos: Vínculos opcionales que proporcionan un fácil acceso a otras páginas. Los vínculos rápidos toman el nombre de la página a la que dirigen.
  • Página: Es una página con nombre desplazable verticalmente que comprende clústeres de apps.
  • Clúster (también llamado colección): Es un carrusel de apps con nombre y desplazamiento horizontal. Se expande a la página completa si la página contiene un solo clúster (o haz clic en “Más” para que sea desplazable verticalmente).

Limitaciones de los elementos de diseño de la tienda

Cuando diseñes e implementes diseños de tiendas para tus clientes, ten en cuenta estos límites (la mayoría se deben a principios de buen diseño de la IU):

  • 100 apps por clúster
  • 30 clústeres por página
  • 10 vínculos rápidos por página
  • 100 páginas por tienda
  • 1,000 productos (apps aprobadas) por empresa

Nombres localizados de páginas y clústeres

El diseño administrado de Google Play Store admite nombres localizados para páginas de la tienda y clústeres de tiendas. Cuando creas una página o un clúster, proporcionas una lista de configuraciones regionales compatibles, como etiquetas de idioma IETF, y los nombres localizados asociados. Si la configuración regional de un usuario no se encuentra en la lista admitida, el sistema elige la coincidencia más cercana disponible. Por ejemplo, si en-GB no está disponible, el sistema elige en-US en su lugar. Si no hay una coincidencia cercana disponible, el sistema elige el nombre de la lista.

Cómo agregar apps al diseño de una tienda

Todas las apps presentes en policy.productPolicy se agregan automáticamente si una empresa usa un diseño básico para la tienda. Si una empresa usa un diseño personalizado de la tienda, las apps solo están presentes en el diseño personalizado y la lista de productPolicy se mostrará en el dispositivo. Todos los elementos presentes en policy.productPolicy se pueden buscar en Play Store.

Para que un usuario final instale una app desde Google Play Store administrado, esta debe ser compatible con el dispositivo del usuario y cumplir con la siguiente condición: * Se agregó a la lista de entidades permitidas del usuario (mediante policy.productPolicy en el recurso del dispositivo) Y policy.productAvailabilityPolicy está configurado como "lista blanca", O BIEN policy.productAvailabilityPolicy debe estar configurado en "todos" (lo que permite la búsqueda e instalación de cualquier app).

Un usuario puede usar la función de búsqueda integrada en Google Play administrado para buscar e instalar cualquier app que cumpla con estas condiciones. Sin embargo, la app solo será visible en un diseño básico de Play Store o si agregaste la app a una colección o clúster.

Apps con aprobación revocada

Los administradores pueden anular la aprobación de una app (revocar su aprobación) en cualquier momento. Las apps con aprobación revocada aún se pueden agregar a los clústeres y las listas de permisos de usuarios, pero los usuarios no las verán ni podrán instalarlas desde Google Play Store administrado. Si se vuelve a aprobar una app con aprobación revocada, volverá a estar disponible para los usuarios en Google Play Store administrado.

Diseño básico de la tienda

De forma predeterminada, cada uno de tus clientes tiene habilitado un diseño básico de Play Store. El diseño básico tiene 1 página y 1 clúster, que muestra un máximo de 1,000 apps. Las apps de la página se ordenan en función de su valor product ID. Si creas un diseño personalizado de la tienda (mediante la configuración de storeLayoutType =“custom”), se inhabilita el diseño básico de la tienda.

Cómo crear diseños personalizados de Play Store

Los EMM pueden crear diseños de tienda personalizados para cada uno de sus clientes empresariales. Los diseños personalizados de Store te permiten configurar clústeres de apps, agregar clústeres específicos a páginas y especificar vínculos rápidos. Debido a que defines las apps que componen cada clúster, puedes usarlos para agrupar apps relacionadas (por ejemplo, “Imprescindibles” y “Completadas”). Los usuarios solo ven las apps cuyos permisos hayan sido aceptados por el administrador.

En la referencia de la API de EMM de Google Play, encontrarás información sobre los recursos y métodos asociados que usas para crear un diseño de tienda personalizado. Específicamente, puedes consultar Storelayoutpages y Storelayoutclusters. Los pasos descritos en las siguientes secciones te guiarán a través de un ejemplo básico.

Tareas de programación

Si deseas crear un diseño personalizado de Google Play Store administrado para tus clientes, debes hacer lo siguiente:

  1. Crea una página
  2. Crea uno o más clústeres dentro de las páginas.
  3. Cómo configurar la página principal

Como mínimo, debes crear al menos una página que contenga un clúster para un diseño de tienda, y el clúster debe contener al menos una app. También debes configurar la página principal. Si creas más de una página, tienes la opción de configurar vínculos rápidos para que se muestren en la parte superior de cada una.

A continuación, se describen las tareas de programación para crear un diseño personalizado de Play Store administrado, seguida de un ejemplo completo de un diseño de Play Store.

Crea una página

Una página consta de uno o más clústeres. Cada clúster contiene al menos una app. Las páginas se crean para empresas específicas, por lo que debes invocar operaciones en instancias empresariales específicas (enterpriseId). Puedes proporcionar información de localización y un nombre fácil de usar para cada página, junto con una lista de pageId a las que los usuarios pueden acceder desde la página. La página nueva se crea con la operación insert (Storelayoutpages.insert) como se muestra a continuación:

public StorePage createPage(String enterpriseId, String name)
    throws IOException {
  List<LocalizedText> names =
      ImmutableList.of(
          new LocalizedText().setLocale("en").setText(name));
  StorePage storePage = new StorePage();
  storePage.setName(names);
  return androidEnterprise.storelayoutpages()
    .insert(enterpriseId, storePage)
    .execute();
}

Crea un clúster

Los clústeres contienen grupos de apps. Primero se crea el clúster y, luego, se lo puede agregar a una página. Para crear un clúster, invoca la operación insert de Storelayoutclusters y pasa valores para estas propiedades:

  • Una lista de los productId que debe contener el clúster (por ejemplo, productId para Gmail es app:com.google.android.gm)
  • Un nombre fácil de usar para el clúster, como Fitbit
  • El enterpriseId que debe estar asociado con el clúster
  • El pageId (de la página que debe contener el clúster)
  • La posición del clúster en la página (primero, segundo, etcétera)

Por ejemplo:

private String insertCluster(String enterpriseId, String pageId, String name,
    List<String> productIds, String orderInPage) throws IOException {
  StoreCluster storeCluster = new StoreCluster();
  storeCluster.setName(
      ImmutableList.of(
          new LocalizedText().setLocale("en").setText(name)));
  storeCluster.setProductId(productIds);
  storeCluster.setOrderInPage(orderInPage);
  return androidEnterprise.storelayoutclusters()
    .insert(enterpriseId, pageId, storeCluster)
    .execute()
    .getId();
}

Cómo configurar la página principal

La primera página que se muestra en Google Play administrado en el dispositivo de un usuario es la página principal. Como EMM, defines una página principal para cada uno de tus clientes. La página siempre está visible, incluso cuando está vacía, y no se puede borrar.

En este ejemplo, se recupera el ID de la página principal para el enterpriseId especificado:

public StoreLayout getStoreLayout(String enterpriseId) throws IOException {
  return androidEnterprise
    .enterprises()
    .getStoreLayout(enterpriseId)
    .execute();
}

En el siguiente ejemplo, se establece la página principal de un cliente. Para ello, se proporciona el enterpriseId del cliente y el pageId de la página principal de ese cliente:

public StoreLayout setStoreLayout(String enterpriseId, String homepageId)
    throws IOException {
  StoreLayout storeLayout = new StoreLayout();
  storeLayout.setHomepageId(homepageId);

  return androidEnterprise
    .enterprises()
    .setStoreLayout(enterpriseId, storeLayout)
    .execute();
}

Los vínculos rápidos se muestran en la parte superior de cada página, lo que permite a los usuarios navegar fácilmente entre las páginas de la tienda. Para usar vínculos rápidos, primero obtén el elemento pageId de la página (que muestra insert) y agrega el vínculo a la página. Por ejemplo, si creas tres páginas cuyos pageId son p1, p2 y p3, puedes agregar vínculos rápidos de la primera página a las otras dos con lo siguiente:

StorePage storePage = new StorePage();
storePage.setName(
    ImmutableList.of(new LocalizedText().setLocale("en").setText(title)));
storePage.setLink(ImmutableList.of("p2", "p3");
return androidEnterprise.storelayoutpages()
  .update(enterpriseId, "p1", storePage)
  .execute();

Ejemplo

A continuación, se muestra un ejemplo completo en el que se crea una tienda básica que consta de tres páginas entrelazadas. Cada página se compone de grupos de aplicaciones similares. Cada página se crea especificando el enterpriseId del cliente y configurando solo la página name a fin de obtener su pageId que luego se usa para crear un vínculo rápido a la página.

// Create a basic page and return the pageId.
private String insertPage(String enterpriseId, String title,
    List<String> links) throws IOException {
  List<LocalizedText> names =
      ImmutableList.of(new LocalizedText().setLocale("en").setText(title));
  StorePage page = new StorePage();
  page.setName(names);
  page.setLink(links);
  return enterprise.storelayoutpages().insert(enterpriseId, page).execute().getId();
}

public StoreLayout setStoreLayout(String enterpriseId, String homepageId)
    throws IOException {
  StoreLayout storeLayout = new StoreLayout();
  storeLayout.setHomepageId(homepageId);

  return androidEnterprise
      .enterprises()
      .setStoreLayout(enterpriseId, storeLayout)
      .execute();
}

private String insertCluster(String enterpriseId, String pageId, String name,
    List<String> productIds, String orderInPage) throws IOException {
  StoreCluster cluster = new StoreCluster();
  List<LocalizedText> names =
      ImmutableList.of(new LocalizedText().setLocale("en").setText(name));
  cluster.setName(names);
  cluster.setProductId(productIds);
  cluster.setOrderInPage(orderInPage);
  return androidEnterprise.storelayoutclusters()
      .insert(enterpriseId, pageId, cluster)
      .execute()
      .getId();
}

private void updatePage(String enterpriseId, String pageId, String title,
    List<String> links) throws IOException {
  List<LocalizedText> names =
      ImmutableList.of(new LocalizedText().setLocale("en").setText(title));
  StorePage page = new StorePage();
  page.setName(names);
  page.setLink(links);
  enterprise.storelayoutpages()
      .update(enterpriseId, pageId, page).execute();
}

private void makeStore(String enterpriseId) throws IOException {
  // Create the pages.
  String page1 = insertPage(enterpriseId, "Home");
  String page2 = insertPage(enterpriseId, "Productivity");
  String page3 = insertPage(enterpriseId, "Accounting");

  // Set the homepage (page that displays by default when store is opened).
  setStoreLayout(enterpriseId, page1);

  // Add the links to the pages. This makes a small tree.
  updatePage(enterpriseId, page1, "Home", ImmutableList.of(page2, page3));
  updatePage(enterpriseId, page2, "Productivity", ImmutableList.of(page1));
  updatePage(enterpriseId, page3, "Accounting", ImmutableList.of(page1));

  // Add clusters with contents.
  insertCluster(
      enterpriseId,
      page1,
      "Getting Things Done",
      ImmutableList.of(
          "app:com.mytodolist",
          "app:com.google.android.gm",
          "app:com.google.android.docs"),
      "1");
  insertCluster(
      enterpriseId,
      page1,
      "Strategy",
      ImmutableList.of(
          "app:com.myplanner",
          "app:com.stratego"),
      "2");
  insertCluster(
      enterpriseId,
      page2,
      "Editors",
      ImmutableList.of(
          "app:com.myeditor",
          "app:com.betteredit",
          "app:com.lazyguy"),
      "1");
  insertCluster(
      enterpriseId,
      page2,
      "Time Management",
      ImmutableList.of(
          "app:com.mytimetracker",
          "app:com.lazygal",
          "app:com.lazyguy"),
      "2");
  insertCluster(
      enterpriseId,
      page2,
      "Accounting",
      ImmutableList.of(
          "app:com.mymoney",
          "app:com.taxpro",
          "app:com.balances"),
      "3");
}