Полное руководство по интеграции и созданию форм ACS в AEM
Создать стандартные формы Adobe Campaign в AEM (Adobe Experience Manager) и заставить их работать не должно быть так сложно, но, к сожалению, многие люди находят этот процесс сложным. Вот почему в следующем посте я попытался облегчить вашу жизнь, описав шаги по включению, настройке и созданию форм ACS в AEM и их использованию для создания профиля в ACS.
Зачем вам нужен Adobe Experience Manager?
Как упоминалось на странице документации Adobe Experience Cloud: AEM позволяет создавать и использовать формы, которые взаимодействуют с Adobe Campaign на вашем веб-сайте. Ниже я объединил все шаги, которые я узнал из собственного опыта и на различных форумах сообщества (например, this), которые в некоторой степени помогли мне, но никогда не предлагали полного обзора. Шаги из этого руководства - это то, что лучше всего сработало для меня, и я надеюсь, что оно поможет и вам!
Пошаговое руководство по созданию стандартной формы Adobe Campaign в AEM
Я изменю существующий проект We.Retail, чтобы продемонстрировать, как заставить его работать. Я почти уверен, что если вы выполните тот же набор шагов в своем собственном проекте (или просто в We.Retail, чтобы проверить, действительно ли работает!), Вы сможете все исправить и работает в кратчайшие сроки.
На этих шагах я внесу некоторые изменения в существующие шаблоны и установлю в них некоторые свойства по умолчанию, а также создам clientlib вместе с очевидной облачной конфигурацией Adobe Campaign, чтобы иметь возможность создать профиль в Adobe Campaign Standard с помощью формы.
Итак, приступим!
1. Измените «компонент страницы / компонент структуры» - как бы вы это ни называли!
1.1 Включите jQuery JS в тег заголовка своего веб-сайта. Вы можете пропустить это, если оно уже загружено в вашем приложении. Это изменение обычно должно выполняться в customheaderlibs.html
Пример:
Путь: /apps/weretail/components/structure/page/customheaderlibs.html
Код:
<sly data-sly-call="${clientlib.js @ categories='cq.jquery'}"></sly>
1.2 Включите context hub и granite utils.
Вы можете включить следующий фрагмент в head.html (обычно это место, где у вас есть тег head).
Этот шаг гарантирует, что контекстный концентратор правильно загружается на ваш веб-сайт, что необходимо для работы возможностей сопоставления компонента Campaign (будет использоваться на шаге 6.6). Без строк 3 и 4 (в фрагменте кода) ниже вы получите ошибки «CUI не определен», «Невозможно прочитать свойство« externalize »из неопределенного» и «window.injectCentextHubUI is not a function» в консоли браузера.
ПРИМЕЧАНИЕ. Просто в качестве примера я добавляю это изменение в указанный путь к файлу, поскольку оно не переопределяется в We.Retail. Вы не должны напрямую вносить изменения в этот путь, и я не рекомендую это делать. Вместо этого переопределите его в своем проекте, если это еще не было сделано.
Пример:
Путь: /apps/core/wcm/components/page/v2/page/head.html
Код:
<sly data-sly-test="${wcmmode.edit}">
<meta id="campaignContextHub" data-register="true" />
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.js @ categories='granite.utils'}"/>
<sly data-sly-resource="${ @ path = 'contexthub' , resourceType='granite/contexthub/components/contexthub'}"></sly>
</sly>
2. Компонент страницы «прокси».
Компонент страницы вашего проекта должен указывать на этот компонент страницы (тот, который мы сейчас создадим). Похоже, что AEM использует это конкретное имя пути внутри, чтобы включить интеграцию ACS. Этот компонент прокси-страницы должен указывать на основной компонент страницы, используемый в вашем проекте.
В случае We.Retail компонент страницы указывает на / apps / core / wcm / components / page / v2 / page, и теперь мы делаем так, чтобы компонент прокси-страницы указывал на это.
2.1 Создание компонента прокси-страницы.
ПРИМЕЧАНИЕ. Важно использовать одно и то же имя.
Пример:
+------------------+--------------------+--------+-----------------+ | Node | Property Name | Type | Property Value | +------------------+--------------------+--------+-----------------+ | /apps | - | - | - | | | | | | | ./mcm | jcr:primaryType | Name | nt:folder | | | | | | | ../campaign | jcr:primaryType | Name | nt:folder | | | | | | | .../component | jcr:primaryType | Name | nt:folder | | | | | | | ..../profile | (Use component creation wizard) | +------------------+--------------------+--------+-----------------+
Выделенный текст «Супертип» должен указывать на компонент корневой страницы вашего проекта. Тот, что на скриншоте, действителен для We.Retail.
ПРИМЕЧАНИЕ. Обязательно удалите файл profile.jsp, который получает созданы с помощью этого мастера, так как он нам не нужен. В противном случае вы увидите пустую страницу, когда откроете страницу, относящуюся к этому компоненту страницы.
2.2 Наведите компонент страницы, который вы хотите использовать, на созданный выше прокси-компонент по пути: / apps / mcm / campaign / components / profile
Пример:
В случае We.Retail я изменил узел / apps / weretail / components / structure / page sling: resourceSuperType до mcm / campaign / components / profile
3. [НЕОБЯЗАТЕЛЬНО] Создайте clientLibs.
ПРИМЕЧАНИЕ. Этот шаг требуется в более старых версиях AEM, и если вы видите, что context hub не загружается или упомянутые категории clientlibs не загружаются .
Создайте clientlibs со свойствами, указанными ниже. В случае более старых версий AEM он может находиться в разделе etc / designs, но в случае более новых версий AEM вы можете использовать / apps / settings / wcm / designs.
+------------------+--------------------+--------+-----------------+ | Node | Property Name | Type | Property Value | +------------------+--------------------+--------+-----------------+ |./campaign | jcr:primaryType | Name | cq:Page | | | | | | |../jcr:content | cq:template | String | /libs/wcm/core | | /templates | | /designpage | | | | | | |.../client-context| jcr:primaryType | Name | nt:unstructured | | | | | | |..../clientcontext| path | String |/etc | | /clientcontext | | /campaign | | | sling:resourceType | String |cq | | /personalization | | /components | | /clientcontext | | | | | | |..../config | path | String |/etc | | /clientcontext | | /campaign | | | sling:resourceType | String |cq | | /personalization | | /components | | /clientcontext | | /config | | | | | | |../clientlibs | jcr:primaryType | Name | nt:folder | | | | | | |.../author | jcr:primaryType |Name|cq:ClientLibraryFolder| | | embed |String[]| jquery | | granite.utils | | granite.jquery | | cq.jquery | | cq.wcm.foundation| | cq.wcm.foundation-main| +------------------+--------------------+--------+-----------------+
4. Шаблон
Создайте шаблон, используя компонент страницы, измененный выше (в шагах 1 и 2). Я не буду объяснять, как его создать, поскольку для этого можно сослаться на Документацию Adobe Experience Cloud. Я буду использовать уже существующий шаблон по пути / conf / we-retail / settings / wcm / templates / hero-page.
4.1 Встраивание необходимых статических свойств в шаблон
Следующие свойства необходимо добавить вручную в исходную конфигурацию шаблона, который вы создали или уже создали.
Поскольку я использую We.Retail, я перейду к / conf / we-retail / settings / wcm / templates / hero-page / initial / jcr: content. В вашем случае вы должны перейти к аналогичному начальному узлу вашего шаблона проекта и добавить к нему следующие свойства:
+-------------+----------+------------+ | Name | Type | Value | +-------------+----------+------------+ |acMapping | String | profile | | | | | |acTemplateId | String | mail | +-------------+----------+------------+
То же самое следует добавить и в «начальный» узел вашего конкретного типа шаблона. Для этого примера в этом нет необходимости, поэтому я пропущу его здесь.
4.2 [НЕОБЯЗАТЕЛЬНО] Добавление свойств начальной страницы
Откройте шаблон (выбрав Инструменты - ›Шаблоны -› We.Retail - ›Главная страница), выберите« Исходное содержимое »в правом верхнем углу, а затем выберите« Свойства исходной страницы ». Там выберите «Дополнительно», выберите клиентскую библиотеку, созданную выше на шаге 3, в поле «Дизайн» и нажмите «Сохранить и закрыть». В нашем случае это будет что-то вроде / apps / campaign в средстве выбора пути и будет выглядеть как / apps / settings / wcm / designs / campaign после выбора, в поле «Дизайн». Убедитесь, что вы выбрали один уровень перед папкой «clientlibs» в средстве выбора пути, и окончательный путь не должен содержать «clientlibs» в конце.
4.3 Добавление необходимых компонентов в список разрешенных компонентов нашего шаблона
Теперь снова используя страницу шаблона, открытую выше, в верхнем правом углу выберите «Структура». На этой странице мы можем выбрать, какие компоненты разрешены. Для нашего примера нам понадобятся те, что из «Adobe Campaign» и «CTA-Lead-Form».
5. Конфигурация облака.
Теперь мы закончили с нашими изменениями «кода» и конфигурациями, последним шагом в настройке будет создание облачной конфигурации Adobe Campaign Standard.
5.1 Перейдите в Инструменты - ›Облачные службы -› Устаревшие облачные службы. На этой странице прокрутите вниз до Adobe Campaign и нажмите «Настроить сейчас», чтобы добавить новую конфигурацию.
После заполнения «Заголовка» и выбора единственного доступного шаблона, например «Конфигурация Adobe Campaign» »В диалоговом окне« Создать конфигурацию »появится следующий диалог:
5.2 «Имя пользователя» обычно означает «aemserver», а «Конечная точка API» - это URL-адрес, который вы используете для доступа к Adobe Campaign Standard, заканчивающийся на campaign.adobe.com. Для получения пароля вам необходимо обратиться в службу поддержки клиентов Adobe. Только Adobe может создать этого пользователя и сообщить его пароль. После того, как вы введете данные и нажмете «Подключиться к Adobe Campaign», и если все данные верны, вы должны получить:
Если вы не получили это уведомление, значит, либо вы ввели неверную информацию, либо вам нужно внести свой IP-адрес в белый список из вашего экземпляра AEM или ACS, либо и того, и другого.
6. ФОРМА!
Теперь мы готовы создать страницу, используя шаблон, созданный на шаге 4, и созданную выше облачную конфигурацию, чтобы создать страницу в We.Retail, добавить к ней поля формы, привязать эти поля формы к профилю ACS schema и отправьте эту небольшую форму для создания профиля в ACS.
6.1 Создайте страницу, используя шаблон, который мы создали или изменили выше. Я буду использовать Шаблон героя, так как это то, что я изменил выше:
Перейдите к / content / we-retail / language-masters / en на «Сайтах» страницу, нажмите «Создать», затем «Страница», выберите шаблон и введите необходимые данные. В моем случае я заполняю только поле «Заголовок».
6.2 Откройте страницу, нажмите «Открыть свойства страницы», перейдите в «Облачные службы» и выберите конфигурацию облака, созданную выше. на шаге 5 выше и нажмите «Сохранить и закрыть».
6.3 Теперь в пустой «parsys» на странице сначала добавьте компонент «Lead Form» из группы компонентов «CTA-LEAD-FORM».
6.4 Измените заполнитель «Начало формы».
и появится следующий диалог
Я бы перешел на вкладку «Дополнительно» и ввел только необходимые данные - «Параметры публикации», где я выбираю «Adobe Campaign: Сохранить профиль» и выбираю «Профиль - Создать, если не существует» в разделе «Конфигурация действий».
6.5 Теперь нажмите заполнитель «Конец формы» и нажмите «+», чтобы начать добавлять поля формы:
Затем я выбираю компонент «Текстовое поле (Кампания)» из группы компонентов «Adobe Campaign».
6.6 Теперь отредактируйте добавленный выше компонент и введите такие данные, как «Заголовок» и «Имя», для которых я добавлю «Имя» и «firstName» соответственно, а затем мы перейдем к следующей вкладке с надписью « Adobe Campaign ». А теперь настал момент истины, чтобы узнать, действительно ли мы можем просматривать фактические поля схемы профиля, полученные из Adobe Campaign Standard! Когда я нажимаю логотип Adobe Campaign рядом с полем ввода «Сопоставление»,
Я вижу следующий диалог:
Здесь я перейду к «Профиль», выберу «Имя» и сохраню.
6.7 Мы повторяем шаги 6.5 и 6.5, чтобы добавить в форму «Фамилия» и «Адрес электронной почты», и теперь моя форма будет выглядеть нравиться:
6.8 Теперь мы добавляем кнопку «Отправить» в форму. Для этого мы снова нажмем на заполнитель «Конец формы», а теперь нажмем «Настроить».
И появится следующий диалог:
Здесь мы можем выполнить только необходимую настройку, например, включить «Показать кнопку отправки» и добавить «Заголовок отправки».
Теперь просмотрите страницу в режиме публикации, заполните необходимые данные и отправьте форму. Он должен просто обновить страницу, и если вы проверите в Adobe Campaign Standard последний профиль, вы сможете увидеть новый профиль с отправленной информацией.
Заключение
Итак, вы увидели изменения и настройки, которые необходимо сделать для компонента формы в AEM, чтобы он мог отправлять информацию в Adobe Campaign Standard. Теперь вам нужно изучить другие возможности этой формы и способы их использования. Я лично всегда расширяю компоненты Adobe Campaign и изменяю диалоги и html в соответствии со своими потребностями. Однако для меня наиболее важной функцией является возможность привязки - привязка полей формы к полям схемы Adobe Campaign Standard Profile. Использование этой функции с моей собственной логикой отправки формы с использованием ACS API предлагает мне большой набор возможностей для работы с AEM и Adobe Campaign Standard.
