Integrate the Adobe Experience Platform Mobile SDK with Commerce

Learn about mobile app capabilities by reviewing the Adobe Experience Cloud in mobile apps tutorial.

Install and configure the SDK in Experience Platform.

To send Commerce event data to the Experience Platform via the SDK, you must provide an XDM schema in the application code. This schema must match the schema configured for the SDK in the Experience Platform.

The following example shows how to track the web.webpagedetails.pageViews event and set the identityMap using the email field.

let stateName = "luma: content: ios: us: en: home"
var xdmData: [String: Any] = [
    "eventType": "web.webpagedetails.pageViews",
    "web": [
        "webPageDetails": [
            "pageViews": [
                "value": 1
            ],
            "name": "Home page"
        ]
    ]
]

let experienceEvent = ExperienceEvent(xdm: xdmData)
Edge.sendEvent(experienceEvent: experienceEvent)

// Adobe Experience Platform - Update Identity

let emailLabel = "mobileuser@example.com"

let identityMap: IdentityMap = IdentityMap()
identityMap.add(item: IdentityItem(id: emailLabel), withNamespace: "Email")
Identity.updateIdentities(with: identityMap)

Connect to the Commerce Cloud environment.

In your project’s build settings, add the URL to the Commerce GraphQL endpoint. Such as:

• Debug: http://debug.commercesite.cloud/graphql/
• Release: http://release.commercesite.cloud/graphql/

To retrieve data from the Commerce GraphQL endpoints, first generate the necessary files and directories in your project using the Apollo Code Generator.

1. From your project directory, install Apollo iOS.

2. Initialize the Apollo Codegen CLI.

   This creates an apollo-codegen-configuration.json file.

3. Generate the necessary GraphQL files and directories in your project by replacing the contents of the apollo-codegen-configuration.json file with the following:

   code language-json

   { "schemaName" : "MagentoAPI", "input" : { "operationSearchPaths" : [ "**/*.graphql" ], "schemaSearchPaths" : [ "**/*.graphqls" ] }, "output" : { "testMocks" : { "none" : { } }, "schemaTypes" : { "path" : "../MagentoAPI", "moduleType" : { "swiftPackageManager" : { } } }, "operations" : { "inSchemaModule" : { } } }, "schemaDownloadConfiguration": { "downloadMethod": { "introspection": { "endpointURL": "http://magento24.com/graphql/", "httpMethod": { "POST": {} }, "includeDeprecatedInputValues": false, "outputFormat": "SDL" } }, "downloadTimeout": 60, "headers": [], "outputPath": "magento.graphqls" } }

4. Fetch the Commerce GraphQL schema.

   Ensure that the path is to the ./apollo-codegen-config.json file, which contains the reference to the Commerce GraphQL schema.

5. Generate the source code.

   Ensure that the path is to the ./apollo-codegen-config.json file, which contains the configuration information to generate the necessary files and directories.

6. Inside the newly created GraphQLGenerated folder, add or edit GraphQL types. For example, you can add a DynamicBlocks.graphql type with the following content:

   code language-graphql
   query dynamicBlocks($input: DynamicBlocksFilterInput){ dynamicBlocks(input: $input) { items { content { html } } } }

You have now integrated the Adobe Experience Platform Mobile SDK with your Commerce mobile app. Event data flows from your app to the Experience Platform edge.