Adobe recommends using the SPA Editor for projects that require single page application framework-based client-side rendering (e.g. React). Learn more.
This document is part of the Getting Started with AEM Mobile Guide, a recommended starting point for AEM Mobile reference.
There’s a number of steps that need to come together before content authors can start to generate targeted content for mobile apps: There’s getting the right set of permissions for users and groups, creating cloud services, configuring the application for the activity, and finally generating the content.
The assumption going forward is that the AEM Mobile Hybrid Reference Application has been successfully deployed and accessible via the AEM Mobile Dashboard.
Users that need access to the personalization console need to be part of the
target-activity-authors group. It is suggested that as part of the users and group setup that the target-activity-group should be added to the apps-admins group. By adding the target-activity-authors group this will allow users ability to see the Personalization navigation menu entry.
Forgetting to add the users or groups that you want to have access to the personalization admin console to the target-activity-authors group will prevent users from seeing the personalization console.
To get targeted content working for mobile applications there are two services that need to be configured: The Adobe Target Service and the Adobe Mobile Services service. The Adobe Target Service provides the engine for processing client requests and returning the personalized content. The Adobe Mobile Services service provides the connection between the Adobe services and the mobile application via the ADBMobileConfig.json file which is consumed by the AMS Cordova plugin. From the AEM Mobile Dashboard you can configure your application by adding the two services.
From the AEM Mobile Dashboard locate the Manage Cloud Services and click the + button.
From the Add Cloud Service wizard select the “Adobe Target” cloud service card and click Next.
From the Select a Configuration dropdown you can either create a new configuration or select from an existing one. To create a new configuration select “Create Configuration” from the dropdown. Enter a title for the Target configuration. Enter your client code, email, and password that are associated with your Target account. If you do not know the values for these fields contact the Adobe Target support. Click the “Verify” button to validate the credentials. Once verified, click the Submit button to create the cloud service.
The cloud service that gets created is automatically associated with the mobile application via the wizard. The cq:cloudserviceconfigs property value gets set on the jcr:content node of the apps group node. For the hybrid app sample it gets set on /content/mobileapps/hybrid-reference-app/jcr:content with the value pointing to the automatically generated framework node located at /etc/cloudservices/testandtarget/adobe-target—aem-apps/framework. The framework node has two properties set by default, gender and age. The framework is only used by AEM previewing and does not have any impact on the device.
After completion of the wizard the Manage Cloud Service tile will contain the Target cloud service, however it contains a warning about a missing Adobe Mobile Service account.
It is necessary to link a Adobe Mobile Services (AMS) account to the application as well, the AMS service provides the required ADBMobileConfig.json file which contains the Target client code information. Before creating an association with the AMS account, the AMS account needs to be modified by a user that has permissions to AMS.
To login to the AMS services visit https://mobilemarketing.adobe.com, select the mobile application and click the settings. Locate the SDK Target Options field and place the client code into the field and click Save.
Now that the client code has been associated with the mobile application, when the AMS cloud service is configured via the Adobe Mobile Dashboard the settings for the service settings will be delivered via the ADBMobileConfig.json file.
Now that AMS has been configured, it’s time to associate the mobile application in the Adobe Mobile Dashboard. From the AEM Mobile Dashboard locate the Manage Cloud Services and click the + button.
Select the Adobe Mobile Services card and click Next.
From the Create or Select wizard step select the Mobile Service dropdown and select the Create Configuration entry. Provide a title, company, username, password and select the appropriate data center. If you do not know these values contact your Adobe Mobile Service administrator to obtain them. Once all fields have been filled out click the Verify button. The verification process goes to AMS and verifies the credentials for the account, and upon successful validation, a list of Mobile Applications will be populated where you select the associated mobile application from the dropdown. Click the Submit button to complete the wizard. The process may take a bit of time to obtain the configuration data and any associated analytics with the application. Once the process is complete click the Done button from the modal to return back to the Adobe Mobile Dashboard.
Returning back to the Mobile Dashboard the Manage Cloud Services tile will contain the AMS cloud service. You will also note that the Analyze Metrics tile will be populated with lifecycle reports.
To deliver content to the user’s device content is generated by rendering the offers which are created by AEM content authors. To handle the rendering of target offers there is a new content sync handler that will process the offers. Using the Hybrid Reference Application as our sample, the en (english) content package contains the ContentSyncConfig with a mobileappoffers handler. The next step is crucial for rendering offers to the device. The mobileappoffers handler has a path property that identifies the path to the personalization activity that are to be used for the application.
For example if there is an activity that is located at /content/campaigns/hybridref copy this path and paste it as the value to the path property of the mobileappoffers handler.
For the Hybrid Reference Application there are two mobileappoffers handlers one for the dev and one for productions.
Once the activities path has been set in the mobileappoffers handler’s path property save the handler. The handler will now be ready to start rendering offers for our mobile devices.
The mobileappoffers handler is configured differently for publish and dev setups. For publish setups there is a property called renderMode with a value of publish set on the cq:ContentSyncConfig node. The mobileappoffers handler references the renderMode and, if set to publish, will modify the mbox id that gets created. By default, mboxes that are created by AEM have an --author value appended to the mbox id. This identifies that the activity has not been published and should use the unpublished campaign for offer resolutions.
When content is staged via the Adobe Mobile Dashboard, staged content is considered production ready content and is rendered via the non-dev Content Sync Config. Rendering this way will cause the --author to be removed from all mbox ids and expect a published activity to be available on the Target server. Before testing staged content make sure the activity has been published.
Now that the cloud services have been created and the mobileappoffers handler has been configured, content authors can now start generating targeted experiences.