Bewerkbare formuliervelden gebruiken in op code gebaseerde ervaringen
- Onderwerpen:
- Op code gebaseerde ervaringen
Gemaakt voor:
- Ervaren
- Gebruiker
Voor zowel meer flexibiliteit als controle over de op code-gebaseerde ervaringen, staat Journey Optimizer uw ontwikkelingsteam toe om JSON of HTML inhoudsmalplaatjes tot stand te brengen die specifieke vooraf bepaalde editable gebieden bevatten.
Wanneer het creëren van een op code-gebaseerde ervaring, kunnen de niet-technische marketers deze gebieden in de interface direct uitgeven, zonder de behoefte om de verpersoonlijkingsredacteur zelfs te openen, of om het even welke andere codeelementen in hun reis of campagne te raken.
Deze mogelijkheid biedt een vereenvoudigde ervaring voor marketinggebruikers, terwijl ontwikkelaars meer controle kunnen uitoefenen over de code-inhoud, wat resulteert in minder ruimte voor fouten.
De syntaxis van formuliervelden begrijpen
Als u delen van een HTML of een JSON-code bewerkbaar wilt maken, moet u een specifieke syntaxis gebruiken in de expressie-editor. Dit impliceert het verklaren van a veranderlijke met een standaardwaarde die de gebruikers na het toepassen van het inhoudsmalplaatje op hun op code-gebaseerde ervaring kunnen met voeten treden.
Stel bijvoorbeeld dat u een inhoudssjabloon wilt maken om deze toe te passen op uw ervaringen met code en gebruikers de mogelijkheid wilt geven om een specifieke kleur aan te passen die op verschillende locaties wordt gebruikt, zoals de achtergrondkleuren van frames of knoppen.
Wanneer het creëren van uw inhoudsmalplaatje, moet u een variabele met a unieke identiteitskaart verklaren, bijvoorbeeld "kleur", en het roepen bij de gewenste plaatsen in de inhoud roepen waar u deze kleur wilt toepassen.
Wanneer gebruikers de inhoudssjabloon op hun inhoud toepassen, kunnen ze de kleur aanpassen die wordt gebruikt op de plaats waar naar de variabele wordt verwezen.
Bewerkbare velden toevoegen aan HTML- of JSON-inhoudssjablonen
Om sommige van uw code van JSON of van HTML editable te maken, begin door een code-gebaseerde ervaring inhoudsmalplaatjete creëren waar u specifieke vormgebieden kunt bepalen.
-
Maak een inhoudssjabloon en selecteer het kanaal Code-based experience . Leer hoe te om malplaatjestot stand te brengen
-
Selecteer de ontwerpmodus: HTML of JSON.
LET OP
Als u de ontwerpmodus wijzigt, gaan al uw huidige code verloren. De op code-gebaseerde ervaringen die op dit malplaatje worden gebaseerd moeten de zelfde auteurswijze gebruiken. -
Open de verpersoonlijkingsredacteurom uw codeinhoud uit te geven.
-
Om een editable vormgebied te bepalen, navigeer aan het Helper functions menu in de linkernavigatieruit en voeg de gealigneerde attributen toe. De syntaxis voor het declareren en aanroepen van de variabele wordt automatisch toegevoegd aan de inhoud.
-
Vervang
"name"
door een unieke id om het bewerkbare veld te identificeren. Voer bijvoorbeeld "imgURL" in.OPMERKING
De veld-id moet uniek zijn en mag geen spaties bevatten. Deze id moet overal in de inhoud worden gebruikt waar u de waarde van de variabele wilt weergeven. -
Pas de syntaxis aan uw behoeften aan door parameters toe te voegen die in de onderstaande tabel worden beschreven:
ActieParameterVoorbeeldDeclareer een editable gebied met a standaardwaarde. Als u de sjabloon aan uw inhoud toevoegt, wordt deze standaardwaarde gebruikt als u de sjabloon niet aanpast.Voeg de standaardwaarde tussen de inline-tags toe.{{#inline "editableFieldID"}}default_value{{/inline}}
Bepaal a etiket voor het editable gebied. Dit label wordt in de code-editor weergegeven wanneer u de velden van de sjabloon bewerkt.name="title"
{{#inline "editableFieldID" name="title"}}default_value{{/inline}}
-
Klik op Preview form fields om te controleren hoe de bewerkbare formuliervelden worden weergegeven in de op code gebaseerde ervaringen bij het toepassen van deze sjabloon.
-
Gebruik de syntaxis
{{{name}}}
in uw code op elke plaats waar u de waarde van het bewerkbare veld wilt weergeven. Vervangname
door de unieke id van het veld dat u eerder hebt gedefinieerd. -
Ga op dezelfde manier verder om andere bewerkbare velden toe te voegen, waarbij u elk veld met de tags
{{#inline}}
en{{/inline}}
inpakt. -
Bewerk indien nodig de rest van de code, inclusief de id's die overeenkomen met de bewerkbare velden die u hebt gedefinieerd. leer hoe
-
Sla de sjabloon op.
Beslissingsbeleid gebruiken in bewerkbare veldformulieren
Wanneer u een op code gebaseerde sjabloon voor ervaringsinhoud maakt, kunt u een beslissingsbeleid gebruiken om aanbiedingen in bewerkbare formuliervelden te benutten.
-
Creeer een op code-gebaseerd ervaringsmalplaatje zoals hierboven beschreven 🔗.
-
Klik op Add decision policy met het pictogram Show Decisioning in de rechterraster van het scherm voor de editie of in de editor voor expressies in de sectie Decision policy in het linkermenu.
Leer hoe te om een besluitvormingsbeleid in tot stand te brengen deze sectie.
-
Klik op de knop Insert policy. De code die overeenkomt met het beslissingsbeleid wordt toegevoegd.
-
Na de
{{#each}}
markering, neem de code op die aan het editable vormgebied (s) beantwoordt dat u wilt toevoegen, gebruikend de gealigneerde syntaxis hierboven beschreven 🔗. Vervang"name"
door een unieke id om het bewerkbare veld te identificeren. In dit voorbeeld gebruikt u "title". -
Klik op Preview form fields om te controleren hoe de bewerkbare formuliervelden worden weergegeven in de op code gebaseerde ervaringen bij het toepassen van deze sjabloon.
-
Voeg de rest van de code in boven de tag
{{/each}}
. Gebruik de syntaxis van{{{name}}}
in uw code op elke plaats waar u de waarde van uw editable gebied wilt tonen. In dit voorbeeld vervangt uname
door "title". -
Sla de sjabloon op.
Codevoorbeelden
Hieronder volgen een paar voorbeelden van JSON- en HTML-sjablonen, waarvan er enkele het besluitvormingsbeleid omvatten.
malplaatje JSON:
{{#inline "title" name="Title"}}Best gear for winter is here for you!{{/inline}}
{{#inline "description" name="Description"}}Add description{{/inline}}
{{#inline "imgURL" name="Image Link"}}Add link{{/inline}}
{{#inline "number_of_items" name="Number of items"}}23{{/inline}}
{
"title": "{{{title}}}",
"description": "{{{description}}}",
"imageUrl": "{{{imgURL}}}",
"number_of_items": {{{number_of_items}}},
"code": "DEFAULT"
}
- Tekenreeksvelden moeten tussen dubbele aanhalingstekens staan.
- Gehele getallen of laarzen mogen NIET tussen dubbele aanhalingstekens staan. (Zie het veld
number_of_items
in het bovenstaande voorbeeld.)
malplaatje JSON met besluit:
{
"offer": [
{{#each decisionPolicy.fff709b7-7fef-4e4e-83d7-594fbcf196c1.items as |item|}}
{{#inline "title" name="Title"}}{{item._mobiledx.Title1}}{{/inline}} {{#inline "description" name="Description"}}{{item._mobiledx.Title2}}{{/inline}} {{#inline "imgURL" name="Image Link"}}https://luma.enablementadobe.com/content/luma/us/en/experience/warming-up/_jcr_content/root/hero_image.coreimg.jpeg{{/inline}}
{
"title": "{{{title}}}",
"description": "{{{description}}}",
"imageUrl": "{{{imgURL}}}",
"link": "https://lumaenablement.adobe.com/web/luma/home", "code": "DEFAULT"
},
{{/each}}
]
}
{{#each}}
en {{/each}}
markeringen.malplaatje van HTML:
{{#inline "title" name="Title"}}Please enter title here{{/inline}}
{{#inline "imgSrc" name="Image link"}}{{/inline}}
<div class="TopRibbon__content"><img style="padding: 5px 10px;" class="TopRibbon__image" src="{{{imgSrc}}}" />{{{title}}}</div>
<style> .theme-luma .TopRibbon { background-color: #200098; }</style>
malplaatje van HTML met besluit:
{{#each decisionPolicy.f112884a-5654-43ad-9d6d-dbd32ae23ee6.items as |item|}}
{{#inline "title" name="Title"}}Title is: {{item._mobiledx.Title1}}{{/inline}}
<div class="TopRibbon__content"><img style="padding: 5px 10px;" class="TopRibbon__image" src="{{item._mobiledx.HeroBannerImage.sourceURL}}" />{{{title}}}</div>
<style> .theme-luma .TopRibbon { background-color: #200098; }</style>
{{/each}}
Formuliervelden bewerken in een op code gebaseerde ervaring
Nu de inhoudssjabloon met vooraf gedefinieerde bewerkbare formuliervelden is gemaakt, kunt u een op code gebaseerde ervaring opbouwen met deze inhoudssjabloon.
U kunt de formuliervelden eenvoudig bewerken vanuit een ervaringstraject of -campagne op basis van code, zonder de personalisatie-editor te openen.
-
Selecteer vanuit het scherm van de reisactiviteit of de campagneeditie de inhoudssjabloon met bewerkbare formuliervelden. leer hoe te om inhoudsmalplaatjeste gebruiken
CAUTION
De sjablonen die u kunt kiezen, vallen binnen het bereik van HTML of JSON op basis van de vooraf geselecteerde kanaalconfiguratie. Alleen compatibele sjablonen worden weergegeven. -
De velden die vooraf zijn gedefinieerd in de geselecteerde inhoudssjabloon, zijn beschikbaar in het rechterdeelvenster.
-
In de sectie Editable form fields kunt u:
- Bewerk elke waarde rechtstreeks in de bewerkbare velden, zonder de code-editor te openen.
- Klik het verpersoonlijkingspictogram om elk gebied uit te geven gebruikend de coderedacteur.
NOTE
In beide gevallen kunt u slechts één veld tegelijk bewerken en kunt u de rest van de ervaringsinhoud op basis van code niet bewerken. -
Als het a besluitvormingsbeleidaan het inhoudsmalplaatje werd toegevoegd, komt het met alle attributen beschikbaar in het catalogusschema van aanbiedingen. U kunt het besluitpunt inline of gebruikend de uitdrukkingsredacteur uitgeven.
-
Als u de rest van de code wilt bewerken, klikt u op de knop Edit code en werkt u de volledige code-gebaseerde ervaringsinhoud bij, inclusief de bewerkbare formuliervelden. Meer informatie
Hoe kan ik-video
Leer hoe u bewerkbare velden kunt toevoegen aan op code gebaseerde ervaringskanaal-inhoudssjablonen.