Loading
Utilizzo di prodotti cross-cloud con Marketing Cloud Engagement
Esempi di interazione di personalizzazione personalizzata

Esempi di interazione di personalizzazione personalizzata

Utilizzare questi esempi di casi d'uso comuni per guidare l'impostazione dell'interazione di personalizzazione in Marketing Cloud Engagement.

Esempio 1: Riga oggetto personalizzata

Questo esempio di interazione di personalizzazione personalizzata consente a un utente di specificare un oggetto personalizzato che sostituisca l'oggetto predefinito. È presente una voce per l'oggetto personalizzato nell'estensione dati Marketing Cloud Engagement e negli attributi del profilo. In questo esempio, utilizziamo il campo customSubjectLine. In Marketing Cloud Engagement, modificare l'email e selezionare un oggetto dinamico. Fare clic sull'icona del fulmine sotto all'oggetto.

Specificare un oggetto predefinito e creare una regola. L'oggetto di questa nuova regola è %%customSubjectLine%%. Trascinare l'attributo profilo customSubjectLine nei filtri e modificare "è uguale a" in "non è vuoto". Salvare tutte le modifiche e salvare l'email.


customSubjectLine.cmp
<aura:component access="GLOBAL" implements="mcdm_15:MessagePersonalizationHandler">
    <aura:attribute
        access="GLOBAL"
        name="personalizationReadyHandler"
        type="Aura.Action"
        default="{!c.messagePersonalizationReady}"
    />
<aura:attribute name="customSubjectLine" access="private" type="String" description="Custom email subject line"/>
   <aura:attribute name="selectedMembers" access="private" type="Object[]" description="The currently selected object"/>
  
   <aura:handler name="init" value="{!this}" action="{!c.init}"/>
<lightning:spinner variant="brand" size="large" aura:id="mySpinner"/>

   <div class="slds-card">
       <div class="slds-card__header">
           <div class="slds-media slds-media_center">
               <div class="slds-media__figure">
                   <lightning:icon iconName="custom:custom24" size="large"/>
               </div>
               <div class="slds-media__body">
                   <p class="slds-text-heading_small">Custom subject line demo component</p>
                   <p>Every change fires a <span class="slds-theme_shade">mcdm_15:JourneyApprovalsDataProvided</span> event</p>
               </div>
           </div>
       </div>
      
       <div class="slds-card__body slds-card__body_inner">
           <div>
               <p class="slds-text-title slds-text-align_center">'{!v.selectedMembers.length}' user(s) selected</p>
           </div>
           <div class="slds-m-around_medium">
               <lightning:input class="slds-m-bottom_small" label="Custom Subject Line" value="{!v.customSubjectLine}" onchange="{!c.handleInputChanged}"/>
           </div>
       </div>
   </div>
</aura:component>
customSubjectLineController.js
({
   init: function(cmp) {
       cmp.set('v.selectedMembers', []);
   },
  
   // Handler called when component is ready and receives a list of
   // members being personalized including all relevant information
   // required to customize member personalization
   messagePersonalizationReady: function(cmp, event) {
       var selectedMembers = event.getParam('arguments').members;
       cmp.set('v.selectedMembers', selectedMembers);
       if (selectedMembers.length) {
           // In this example, the custom subject applies to all members
           // so we can grab the customData from the first member
           var data = selectedMembers[0].customData || {};
           cmp.set('v.customSubjectLine', data.customSubjectLine || '');
       }
       var spinner = cmp.find('mySpinner');
       $A.util.addClass(spinner, 'slds-hide');
   },
  
   // Handles changes to the text field (Subject)
   // On each key down, this handler will store the custom
   // subject changes in each members custom data
   handleInputChanged: function(cmp) {
       var data = {
           customSubjectLine: cmp.get('v.customSubjectLine')
       };

       var selectedMembers = cmp.get('v.selectedMembers'),
           id,
           dataProvidedEvent;
      
       // Loop through each member and fire an event to update its custom
       // data with the new changes
       selectedMembers.forEach(function(member) {
           dataProvidedEvent = $A.get('e.mcdm_15:JourneyApprovalsDataProvided');
           // Depending on whether we're dealing with a campaign or quick send
           // use the campaignMemberId or fallback to the objectId which will
           // be present in all other cases.
           id = member.campaignMemberId || member.objectId;
           dataProvidedEvent.setParams({
               id: id,
               data: data
           });
           dataProvidedEvent.fire();
       });
   }
})

Esempio 2: "Invia da" personalizzato (invio dal team)

Questo esempio di interazione di personalizzazione personalizzata consente a un utente di modificare il mittente dell'email specificando un membro dello stesso gruppo.

Creare una classe Apex per recuperare i membri del gruppo.

GroupMemberController.apxc
public with sharing class GroupMembersController {
   @AuraEnabled
   public static List<User> getGroupMembers() {
       String currentUser = UserInfo.getUserId();
       GroupMember myGroup = [SELECT GroupId FROM GroupMember WHERE UserOrGroupId = :currentUser];
      
       List<User> groupMembers = [
           SELECT Name, Email from User WHERE Id in (SELECT userorgroupid from groupmember where group.Id = :myGroup.GroupId)
       ];
      
       return groupMembers;
   }
}
sendFromGroupMember.cmp
<aura:component access="GLOBAL" implements="mcdm_15:MessagePersonalizationHandler" controller="GroupMembersController">
   <aura:attribute access="GLOBAL" name="personalizationReadyHandler" type="Aura.Action" default="{!c.messagePersonalizationReady}"/>
  
   <aura:attribute name="selectedMembers" access="private" type="Object[]" description="The currently selected object"/>
   <aura:attribute name="groupMembers" access="private" type="List" description="List of group members"/>
   <aura:attribute name="sendFromValue" access="private" type="Integer" default="" description="Value of selected send from" />
  
   <aura:handler name="init" value="{!this}" action="{!c.init}"/>
  
   <lightning:spinner variant="brand" size="large" aura:id="mySpinner"/>

   <div class="slds-card">
       <div class="slds-card__header">
           <div class="slds-media slds-media_center">
               <div class="slds-media__figure">
                   <lightning:icon iconName="custom:custom24" size="large"/>
               </div>
               <div class="slds-media__body">
                   <p class="slds-text-heading_small">Send From Group Member Demo</p>
                   <p>Every change fires a <span class="slds-theme_shade">mcdm_15:JourneyApprovalsDataProvided</span> event</p>
               </div>
           </div>
       </div>
      
       <div class="slds-card__body slds-card__body_inner">
           <div>
               <p class="slds-text-title slds-text-align_center">'{!v.selectedMembers.length}' user(s) selected</p>
           </div>
           <div class="slds-m-around_medium">
               <lightning:select aura:id="selectGroupMembers" class="slds-m-bottom_small" name="selectGroupMembers" label="Send From Group Member" value="{!v.sendFromValue}" onchange="{!c.handleSelectChanged}">
                   <option value="">-- None --</option>
                   <aura:iteration items="{!v.groupMembers}" var="member">
                       <option value="{!_index}" text="{!member.Name}"></option>
                   </aura:iteration>
               </lightning:select>
           </div>
       </div>
   </div>
</aura:component>
sendFromGroupMemberController.js
({
   init: function(cmp, event, helper) {
       cmp.set('v.selectedMembers', []);
   },
  
   // Handler called when component is ready and receives a list of
   // members being personalized including all relevant information
   // required to customize member personalization
   messagePersonalizationReady: function(cmp, event, helper) {
       var selectedMembers = event.getParam('arguments').members;
       cmp.set('v.selectedMembers', selectedMembers);
      
       helper.fetchGroupMembers(cmp)
       .then(function(groupMembers) {   
           if (selectedMembers.length) {
               // In this example, the custom subject applies to all members
               // so we can grab the customData from the first member
               var data = selectedMembers[0].customData || {};
              
               // Go through group members update selected value if a value
               // was previously selected
               for (var i=0; i<groupMembers.length; i++) {
                   if (groupMembers[i].Email == data.customSendFromEmail) {
                       cmp.find("selectGroupMembers").set("v.value", i);
                   }
               }
           }
           var spinner = cmp.find('mySpinner');
           $A.util.addClass(spinner, 'slds-hide');
       });
   },
  
   // Handles changes to send from group member drop down
   // and updates all members custom data
   handleSelectChanged: function(cmp, event) {
       var members = cmp.get('v.groupMembers'),
           selectedMembers = cmp.get('v.selectedMembers'),
           id,
           dataProvidedEvent,
           value = cmp.find('selectGroupMembers').get('v.value'),
           data;
      
       if (value != "") {
           cmp.set('v.sendFromValue', value);
           data = {
               customSendFromEmail: members[value].Email,
               customSendFromName: members[value].Name
           };
       } else {
           data = {};
       }
      
       // Loop through each member and fire an event to update its custom
       // data with the new changes
       selectedMembers.forEach(function(member) {
           dataProvidedEvent = $A.get('e.mcdm_15:JourneyApprovalsDataProvided');
           // Depending on whether we're dealing with a campaign or quick send
           // use the campaignMemberId or fallback to the objectId which will
           // be present in all other cases.
           id = member.campaignMemberId || member.objectId;
           dataProvidedEvent.setParams({
               id: id,
               data: data
           });
           dataProvidedEvent.fire();
       });
   }
})
sendFromGroupMemberHelper.js
({
   // Fetches members in the same group as the logged in user and returns
   // a promise.
   // https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_promises.htm
   fetchGroupMembers : function(cmp) {
       return new Promise($A.getCallback(function(resolve, reject) {
           var action = cmp.get('c.getGroupMembers');
           action.setCallback(this, function(response) {
               if (!cmp.isValid() || response.getState() !== 'SUCCESS') {
                   reject(response.getError());
               } else {
                   cmp.set('v.groupMembers', response.getReturnValue());
                   resolve(response.getReturnValue());
               }
           });
          
           $A.enqueueAction(action);
       }));
   }
})

Esempio 3: Modificare membri specifici

Questo esempio di interazione di personalizzazione personalizzata consente a un utente di personalizzare diversi valori per ciascun membro.

modifySpecificMember.cmp
<aura:component access="GLOBAL" implements="mcdm_15:MessagePersonalizationHandler">
   <aura:attribute access="GLOBAL" name="personalizationReadyHandler" type="Aura.Action" default="{!c.messagePersonalizationReady}"/>
  
   <aura:attribute name="selectedMembers" access="private" type="Object[]" description="The currently selected object"/>
   <aura:attribute name="selectedMemberIndex" access="private" type="Integer" default="null" description="Index of the selected member"/>
   <aura:attribute name="selectedMemberId" access="private" type="String" description=""/>
   <aura:attribute name="selectedMemberData" access="private" type="String" description="Custom data for member"/>
  
   <aura:handler name="init" value="{!this}" action="{!c.init}"/>
  
   <lightning:spinner variant="brand" size="large" aura:id="mySpinner"/>

   <div class="slds-card">
       <div class="slds-card__header">
           <div class="slds-media slds-media_center">
               <div class="slds-media__figure">
                   <lightning:icon iconName="custom:custom24" size="large"/>
               </div>
               <div class="slds-media__body">
                   <p class="slds-text-heading_small">Modify specific members demo</p>
                   <p>Every change fires a <span class="slds-theme_shade">mcdm_15:JourneyApprovalsDataProvided</span> event</p>
               </div>
           </div>
       </div>
      
       <div class="slds-card__body slds-card__body_inner">
           <div>
               <p class="slds-text-title slds-text-align_center">'{!v.selectedMembers.length}' user(s) selected</p>
           </div>
           <div class="slds-m-around_medium">
               <lightning:select aura:id="member" class="slds-m-bottom_small" name="memberCustom" label="member custom data" onchange="{!c.handleMemberChanged}" value="{!v.selectedMemberIndex}">
                   <option value="">Select a member</option>
                   <aura:iteration items="{!v.selectedMembers}" var="member">
                       <option value="{!_index}" text="{!member.firstName + ' ' + member.lastName}"></option>
                   </aura:iteration>
               </lightning:select>
              
               <aura:if isTrue="{!not(empty(v.selectedMemberId))}">
                   <lightning:input class="slds-m-bottom_small" label="Custom Member Data" value="{!v.selectedMemberData}" onchange="{!c.handleInputChanged}"/>
               </aura:if>
           </div>
       </div>
   </div>
</aura:component>
modifySpecificMemberController.js
({
   init: function(cmp, event, helper) {
       cmp.set('v.selectedMembers', []);
   },
  
   // Handler called when component is ready and receives a list of
   // members being personalized including all relevant information
   // required to customize member personalization
   messagePersonalizationReady: function(cmp, event) {
       var selectedMembers = event.getParam('arguments').members;
       cmp.set('v.selectedMembers', selectedMembers);
      
       var spinner = cmp.find('mySpinner');
       $A.util.addClass(spinner, 'slds-hide');
   },
  
   // Handle change in member list drop down. Restore previously saved
   // custom data for member. Display text input box for selected
   // member.
   handleMemberChanged: function(cmp, event) {
       var selectedMemberIndex = parseInt(cmp.get('v.selectedMemberIndex'));
       var selectedMembers = cmp.get('v.selectedMembers');
      
       if(!isNaN(selectedMemberIndex)) {
           // Set member id (contact or campaignMemberId)
           cmp.set('v.selectedMemberId', selectedMembers[selectedMemberIndex].campaignMemberId || selectedMembers[selectedMemberIndex].objectId);
          
           // Check if we've previously stored custom data for member. if so, restore it
           if (selectedMembers[parseInt(selectedMemberIndex)].customData.customValue != undefined) {
               cmp.set('v.selectedMemberData', selectedMembers[selectedMemberIndex].customData.customValue);
           } else {
               cmp.set('v.selectedMemberData', "");
           }
       } else {
           cmp.set('v.selectedMemberIndex', null);
           cmp.set('v.selectedMemberId', "");
       }
   },
  
   // Handles changes to member custom data. Fired every change
   handleInputChanged: function(cmp, event) {
       var dataProvidedEvent = $A.get('e.mcdm_15:JourneyApprovalsDataProvided');
      
       var selectedMembers = cmp.get('v.selectedMembers');
       var selectedMemberId = cmp.get('v.selectedMemberId');
       var selectedMemberIndex = parseInt(cmp.get('v.selectedMemberIndex'));
      
       // Also store local value so we can repopulate field if we change
       // members without reloading the CPI. Fired events store the
       // members custom data outside the CPI context and is only retrieved
       // on component load.
       selectedMembers[selectedMemberIndex].customData.customValue = cmp.get('v.selectedMemberData');
      
       dataProvidedEvent.setParams({
           id: selectedMemberId,
           data: {
               customValue: cmp.get('v.selectedMemberData')
           }
       });
       dataProvidedEvent.fire();
   }
})
 
Caricamento
Salesforce Help | Article