Создайте панель поиска для пользовательского интерфейса SFMC

Вы устали прочесывать папки и BU в поисках средств автоматизации, контента или расширений данных в Salesforce Marketing Cloud? Не смотрите дальше! В этом руководстве мы покажем вам, как создать расширение Chrome, которое позволяет пользователям выполнять поиск в пользовательском интерфейсе Salesforce Marketing Cloud. Всего за несколько кликов вы сможете легко найти и выбрать все расширения данных в своей учетной записи. Независимо от того, являетесь ли вы разработчиком или просто хотите оптимизировать свой рабочий процесс, это расширение является обязательным инструментом. Давайте начнем!

Чтобы создать расширение Chrome, добавляющее панель поиска в пользовательский интерфейс Salesforce Marketing Cloud, вам потребуется сделать следующее:

Создайте новый каталог для вашего расширения и создайте файл manifest.json. Этот файл содержит метаданные о вашем расширении, включая его имя и разрешения.
Добавьте разрешение для пользовательского интерфейса Salesforce Marketing Cloud в файл manifest.json:

"permissions": [
    "https://*.s1.marketingcloudapps.com/*"
]

3. Создайте HTML-файл, который будет содержать строку поиска. Этот файл должен иметь элемент формы с полем ввода и кнопкой отправки.

4. Создайте файл JavaScript, который будет обрабатывать функцию поиска. Этот файл должен прослушивать событие отправки формы и отправлять запрос в Salesforce Marketing Cloud API для поиска расширений данных, средств автоматизации и циклов взаимодействия на основе текста, введенного в поле ввода.

5. Используйте API расширений Chrome, чтобы внедрить файлы HTML и JavaScript в пользовательский интерфейс Salesforce Marketing Cloud, когда расширение активировано. Протестируйте расширение, чтобы убедиться, что оно работает должным образом.

Вот пример кода для файлов manifest.json, HTML и JavaScript:

{
  "manifest_version": 2,
  "name": "Salesforce Marketing Cloud Search",
  "version": "1.0",
  "permissions": [
    "https://*.s1.marketingcloudapps.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["https://*.s1.marketingcloudapps.com/*"],
      "css": ["style.css"],
      "js": ["search.js"],
      "run_at": "document_idle"
    }
  ]
}

Панель поиска должна иметь возможность находить расширения данных, автоматизацию и циклы взаимодействия на основе текста, введенного в строку поиска. добавить подробные примеры кода и фрагменты кода. Вот пример HTML-файла, содержащего строку поиска:

<form id="search-form">
  <input type="text" id="search-input" placeholder="Search data extensions, automations, and journeys">
  <button type="submit">Search</button>
</form>

А вот пример файла JavaScript, который обрабатывает функцию поиска:

const form = document.getElementById("search-form");
const input = document.getElementById("search-input");

form.addEventListener("submit", event => {
  event.preventDefault();

  const searchText = input.value;

  // Send a request to the Salesforce Marketing Cloud API to search for data extensions, automations, and journeys based on the search text
  // The API endpoint and required headers will depend on your specific setup
  fetch("https://api.s1.marketingcloudapps.com/search", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer YOUR_ACCESS_TOKEN"
    },
    body: JSON.stringify({
      searchText
    })
  })
  .then(response => response.json())
  .then(results => {
    // Process the search results and display them in the UI
  })
  .catch(error => {
    console.error(error);
  });
});

Наконец, вы можете использовать API расширений Chrome для вставки файлов HTML и JavaScript в пользовательский интерфейс Salesforce Marketing Cloud, когда расширение активировано. Вот пример того, как это сделать в фоновом скрипте:

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === "complete" && tab.url.startsWith("https://*.s1.marketingcloudapps.com/")) {
    chrome.tabs.executeScript(tabId, {
      file: "deselect.js"
    });
    chrome.tabs.insertCSS(tabId, {
      file: "style.css"
    });
  }
});

Чтобы отобразить результаты поиска в пользовательском интерфейсе, можно использовать результаты, возвращаемые Salesforce Marketing Cloud API, и отображать их в файле HTML. Вот пример того, как вы можете это сделать:

<div id="search-results">
  <!-- Render the search results here -->
</div>
// Process the search results and display them in the UI
const searchResultsContainer = document.getElementById("search-results");
searchResultsContainer.innerHTML = "";

results.forEach(result => {
  const resultElement = document.createElement("div");
  resultElement.innerHTML = `<h2>${result.name}</h2><p>${result.description}</p>`;
  searchResultsContainer.appendChild(resultElement);
});

Вы также можете оформить строку поиска и результаты поиска с помощью CSS в файле style.css.

Не забудьте протестировать расширение, чтобы убедиться, что оно работает должным образом. Это можно сделать, установив расширение в Chrome и перейдя в пользовательский интерфейс Salesforce Marketing Cloud. Когда вы вводите текст в строку поиска и отправляете форму, расширение должно отправлять запрос в API и отображать результаты поиска в пользовательском интерфейсе.

Создайте панель поиска для пользовательского интерфейса SFMC

Похожие вопросы