Ti trovi qui:
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();
}
})
