Add tracking of content cards in tutorial

gatsby-config.js

@@ -248,7 +248,7 @@ module.exports = {
                                         path: "/edge/adobe-journey-optimizer/code-based/api-reference"
                                     },
                                     {
-                                        title: "Code-based Tutorial",
+                                        title: "Code-based experiences & Content Cards tutorial",
                                         path: "/edge/adobe-journey-optimizer/code-based/tutorial"
                                     }
                                 ]

src/pages/edge/adobe-journey-optimizer/code-based/api-reference.md

@@ -1,18 +1,19 @@
 ---
-title: Code-based Experiences - API Reference
-description: This document lists the public APIs available in the Messaging extension for implementing code-based experiences.
+title: Code-based Experiences & Content Cards - API Reference
+description: This document lists the public APIs available in the Messaging extension for implementing code-based experiences and content cards.
 keywords:
 - Adobe Journey Optimizer
 - API reference
 - Messaging
 - Code-based Experiences
+- Content Cards
 ---
 
 import Tabs from './tabs/api-reference.md'
 
-# Code-based Experiences - API reference
+# Code-based Experiences & Content Cards - API reference
 
-This document lists the public APIs available in the Messaging extension for implementing code-based experiences.
+This document lists the public APIs available in the Messaging extension for implementing code-based experiences and content cards.
 
 ## getPropositionsForSurfaces
 

src/pages/edge/adobe-journey-optimizer/code-based/index.md

@@ -1,19 +1,20 @@
 ---
-title: Code-based Experiences 
-description: This document guides you to integrating code-based experiences in your application.
+title: Code-based Experiences & Content Cards
+description: This document guides you to integrating code-based experiences and content cards in your application.
 keywords:
 - Adobe Journey Optimizer
 - Guide
 - Code-based experiences
+- Content Cards
 ---
 
-# Code-based Experiences
+# Code-based Experiences & Content Cards
 
-This document guides you to integrating code-based experiences in your application.
+This document guides you through integrating code-based experiences and content cards in your application.
 
 ## API reference
 
-* [Code-based Experiences APIs](./api-reference.md)
+* [Code-based Experiences & Content Cards APIs](./api-reference.md)
 
 ## Public Classes and Enums
 

src/pages/edge/adobe-journey-optimizer/code-based/tabs/tutorial.md

@@ -129,18 +129,29 @@ Messaging.getPropositionsForSurfaces([surface1, surface2]) { propositionsDict, e
 #### Kotlin
 
 ```kotlin
-// get the propositions for surface1
+// get the HTML propositions for surface1
 // bail early if no propositions are found for surface1
 if (propositionsForSurface1 == null || propositionsForSurface1.isEmpty()) return
 
-// iterate through items in proposition
-for (propositionItem in propositionsForSurface1.first()::items) {
-  if (propositionItem.schema == SchemaType.HTML_CONTENT) {
+val propositionItem1 = propositionsForSurface1.first().items[0]
+if (propositionItem1.schema == SchemaType.HTML_CONTENT) {
     // retrieve the HTML content
-    val htmlContent = propositionItem.htmlContent
+    val htmlContent:String? = propositionItem1.htmlContent
 
     // use retrieved html content
-  }
+}
+
+
+// get the content card propositions for surface2
+// bail early if no propositions are found for surface2
+if (propositionsForSurface2 == null || propositionsForSurface2.isEmpty()) return
+
+val propositionItem2 = propositionsForSurface2.first().items[0]
+if (propositionItem2.schema == SchemaType.CONTENT_CARD) {
+    // retrieve the HTML content
+    val contentCard: ContentCard? = propositionItem2.contentCardSchemaData?.contentCard
+
+    // use retrieved content card
 }
 ```
 
@@ -153,14 +164,25 @@ if (propositionsForSurface1 == null || propositionsForSurface1.isEmpty()) {
     return;
 }
 
-// iterate through items in proposition
-for (final PropositionItem propositionItem: propositionsForSurface1.get(0).getItems()) {
-    if (propositionItem.getSchema() == SchemaType.HTML_CONTENT) {
-        // retrieve the HTML content
-        final String htmlContent = propositionItem.getHtmlContent();
+final PropositionItem propositionItem1 = propositionsForSurface1.get(0).getItems().get(0);
+if (propositionItem1.getSchema() == SchemaType.HTML_CONTENT) {
+    // retrieve the HTML content
+    final String htmlContent = propositionItem1.getHtmlContent();
 
-        // use retrieved html content
-    }
+    // use retrieved html content
+}
+
+if (propositionsForSurface2 == null || propositionsForSurface2.isEmpty()) {
+    // bail early if no propositions are found for surface2
+    return;
+}
+
+final PropositionItem propositionItem2 = propositionsForSurface2.get(0).getItems().get(0);
+if (propositionItem2.getSchema() == SchemaType.CONTENT_CARD) {
+    // retrieve the content card
+    final ContentCard contentCard = propositionItem2.getContentCardSchemaData().getContentCard();
+
+    // use retrieved content card
 }
 ```
 
@@ -169,16 +191,27 @@ for (final PropositionItem propositionItem: propositionsForSurface1.get(0).getIt
 #### Swift
 
 ```swift
-/// get the propositions for surface1
-if let codePropositions: [Proposition] = propositionsDict?[surface1], !codePropositions.isEmpty {
-    /// iterate through items in proposition
-    ForEach(codePropositions.first?.items as? [PropositionItem] ?? [], id:\.itemId) { propositionItem in
-        if propositionItem.schema == .htmlContent {
-            // retrieve the HTML content
-            let htmlContent = propositionItem.htmlContent
-
-            // use retrieved html content
-        }
+/// get the HTML propositions for surface1
+if let propositionsForSurface1: [Proposition] = propositionsDict?[surface1], !propositionsForSurface1.isEmpty,
+    let propositionItem1 = propositionsForSurface1.first?.items.first {
+    if propositionItem1.schema == .htmlContent {
+        // retrieve the HTML content
+        let htmlContent = propositionItem1.htmlContent
+
+        // use retrieved html content
+
+    }
+}
+
+/// get the content card propositions for surface2
+if let propositionsForSurface2: [Proposition] = propositionsDict?[surface2], !propositionsForSurface2.isEmpty,
+    let propositionItem2 = propositionsForSurface2.first?.items.first {
+    if propositionItem2.schema == .contentCard {
+        // retrieve the content card
+        let contentCard = propositionItem2.contentCardSchemaData?.getContentCard()
+
+        // use retrieved content card
+
     }
 }
 ```
@@ -190,23 +223,23 @@ if let codePropositions: [Proposition] = propositionsDict?[surface1], !codePropo
 ```kotlin
 // Tracking display of PropositionItem          
 // use the same propositionItem object that was used to get the content in the previous section
-propositionItem.track(MessagingEdgeEventType.DISPLAY)
+propositionItem1.track(MessagingEdgeEventType.DISPLAY)
 
 // Tracking interaction with PropositionItem
 // use the same propositionItem object that was used to get the content in the previous section
-propositionItem.track("click", MessagingEdgeEventType.INTERACT, null)
+propositionItem1.track("click", MessagingEdgeEventType.INTERACT, null)
 ```
 
 #### Java
 
 ```java
 // Tracking display of PropositionItem          
 // use the same propositionItem object that was used to get the content in the previous section
-propositionItem.track(MessagingEdgeEventType.DISPLAY);
+propositionItem1.track(MessagingEdgeEventType.DISPLAY);
 
 // Tracking interaction with PropositionItem
 // use the same propositionItem object that was used to get the content in the previous section
-propositionItem.track("click", MessagingEdgeEventType.INTERACT, null);
+propositionItem1.track("click", MessagingEdgeEventType.INTERACT, null);
 ```
 
 <Variant platform="ios" function="track" repeat="2"/>
@@ -216,11 +249,11 @@ propositionItem.track("click", MessagingEdgeEventType.INTERACT, null);
 ```swift
 /// Tracking display of PropositionItem
 /// use the same propositionItem object that was used to get the content in the previous section
-propositionItem.track(withEdgeEventType: MessagingEdgeEventType.display)
+propositionItem1.track(withEdgeEventType: MessagingEdgeEventType.display)
 
 /// Tracking interaction with PropositionItem        
 /// use the same propositionItem object that was used to get the content in the previous section
-propositionItem.track("click", withEdgeEventType: MessagingEdgeEventType.display)
+propositionItem1.track("click", withEdgeEventType: MessagingEdgeEventType.display)
 ```
 
 <Variant platform="android" function="track-with-tokens" repeat="4"/>
@@ -244,7 +277,7 @@ propositionItem.track("click", MessagingEdgeEventType.INTERACT, tokenList)
 final List<String> tokenList = new ArrayList<>();
 tokenList.add(dataItemToken1);
 tokenList.add(dataItemToken2);
-propositionItem.track("click", MessagingEdgeEventType.INTERACT, tokenList);
+propositionItem1.track("click", MessagingEdgeEventType.INTERACT, tokenList);
 ```
 
 <Variant platform="ios" function="track-with-tokens" repeat="2"/>
@@ -254,5 +287,45 @@ propositionItem.track("click", MessagingEdgeEventType.INTERACT, tokenList);
 ```swift
 /// Tracking interaction with PropositionItem with tokens
 /// Extract the tokens from the PropositionItem item data
-propositionItem.track("click", withEdgeEventType: .interact, forTokens: [dataItemToken1, dataItemToken2])
+propositionItem1.track("click", withEdgeEventType: .interact, forTokens: [dataItemToken1, dataItemToken2])
+```
+
+<Variant platform="android" function="track-content-card" repeat="4"/>
+
+#### Kotlin
+
+```kotlin
+// Tracking display of ContentCard          
+// use the same contentCard object from the retrieve propositions section
+contentCard.track(null, MessagingEdgeEventType.DISPLAY)
+
+// Tracking interaction with ContentCard
+// use the same contentCard object from the retrieve propositions section
+contentCard.track("click", MessagingEdgeEventType.INTERACT)
+```
+
+#### Java
+
+```java
+// Tracking display of ContentCard          
+// use the same contentCard from the retrieve propositions section
+contentCard.track(null, MessagingEdgeEventType.DISPLAY);
+
+// Tracking interaction with ContentCard
+// use the same contentCard object from the retrieve propositions section
+contentCard.track("click", MessagingEdgeEventType.INTERACT);
+```
+
+<Variant platform="ios" function="track-content-card" repeat="2"/>
+
+#### Swift
+
+```swift
+/// Tracking display of ContentCard
+/// use the same contentCard object from the retrieve propositions section
+contentCard.track(withEdgeEventType: MessagingEdgeEventType.display)
+
+/// Tracking interaction with ContentCard        
+/// use the same contentCard object from retrieve propositions section
+contentCard.track("click", withEdgeEventType: MessagingEdgeEventType.interact)
 ```