Как менять текст на сайте в зависимости от параметра URL

Доступно на тарифе Minisites и выше

Добавляя сторонний код, вы можете использовать функцию getQueryParam(), чтобы отображать различный контент на сайте в зависимости от того, по ссылке с каким параметром перейдет пользователь. К примеру, вы можете использовать эту функцию, чтобы информировать различные группы посетителей сайта о специализированных под них предложения.

В этой статье мы рассмотрим, как добавить функцию для замены текста с использованием стороннего кода.

Содержание

Настройте код на сайте

Добавьте функцию через сторонний код

Перейдите в раздел Сайты (Websites), выберите нужный сайт и нажмите Настройки сайта (Site Settings).

Перейдите в настройках сайта на вкладку Дополнительный код (Custom code) и нажмите Добавить код на сайт (Add code to site).

Выберите расположение в <head> и введите название, чтобы различать код в списке добавленных скриптов.

Вставьте следующий код:

<script>
function getQueryParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}

window.onload = function updateTextBasedOnOfferId() {
const offerId = getQueryParam('YOUR_PARAMETER_NAME');
const textElement = document.getElementById('replaceId');
if (!textElement) {
console.error('Element with id "replaceId" not found.');
return; // Exit if element not found
}

switch (YOUR_PARAMETER_NAME) {
case 'YOUR_PARAMETER_VALUE1':
textElement.textContent = 'YOUR_DYNAMIC_TEXT1';
break;
case 'YOUR_PARAMETER_VALUE2':
textElement.textContent = 'YOUR_DYNAMIC_TEXT2';
break;

default:
textElement.textContent = 'Default Title';
}}
</script>

Не изменяйте код, если не разбираетесь в работе функций и последствиях изменения параметров. SendPulse не оказывает поддержку по исправлению ошибок в измененном коде или его модификации.

Вы можете указать следующие параметры:

Параметр	Описание	Как заполнить в коде функции
`getQueryParam()`	Функция извлекает значение параметра из URL-адреса.	В скобках `()` укажите название параметра ссылки. В нашем примере на место `YOUR_PARAMETER_NAME` подставим `offerId`.
`document.getElementById()`	Метод используется, чтобы получить ссылку на элемент сайта с идентификатором.	Укажите значение для идентификации элемента, в котором нужно заменить текст. Этот идентификатор вам нужно вставить в конструктор сайта к текстовому блоку. В нашем примере мы будем использовать `replaceId`.
`case`	Оператор внутри `switch`, представляющий различные значения переменной.	Для каждого условия укажите значение, которое может принимать параметр ссылки. В нашем примере у нас два условия: на место `YOUR_PARAMETER_VALUE1` подставим `students` и на место `YOUR_PARAMETER_VALUE2` — `experienced`.
`textElement.textContent`	Свойство элемента, содержащее текстовое значение элемента.	Укажите текст, который хотите отобразить в элементе для каждого условия. В нашем примере 2 текста под каждое условие. Для первого (для студентов) на место `YOUR_DYNAMIC_TEXT1` добавим “Enrich your career and unlock new heights in your career journey”. Для второго (для опытных) на место `YOUR_PARAMETER_VALUE2` добавим “Apply your knowledge in practice. Discount available for students”.

Читайте подробнее: Как добавить сторонний код на сайт.

Добавьте ID в текстовый виджет в конструкторе сайта

Теперь необходимо добавить ID текстового элемента в текстовый виджет. Перейдите в конструктор сайта, выберите нужный текстовый элемент, нажмите на текст и в панели редактирования нажмите на иконку <>.

В открывшемся окне Исходный код (Source Code) добавьте id replaceId для заголовка или текста. Нажмите Сохранить (Save).

Добавьте параметр к ссылке

Чтобы создать ссылку с параметром в URL-адресе:

После ссылки на сайт добавьте символ ?
Укажите название параметра.
Введите символ = и установите значение для нужного условия.

У вас должна получится ссылка следующего вида:

https://example.com/?YOUR_PARAMETER_NAME=YOUR_PARAMETER_VALUE1

Просмотрите результат

Перейдите по ссылке с параметром и проверьте текстовый блок.

В нашем примере при переходе по ссылке

https://digitalprworkshop.pulse.is/?offerId=students отображается текст из первого условия.

При переходе по ссылке

https://digitalprworkshop.pulse.is/?offerId=experienced отображается текст из второго условия.

Обновлено: 05.03.2024

Оцените, насколько полезна статья "Как менять текст на сайте в зависимости от параметра URL"

Оценка: 4 / 5 (8)

Популярное в нашем блоге

Как менять текст на сайте в зависимости от параметра URL

Содержание

Настройте код на сайте

Добавьте функцию через сторонний код

Добавьте ID в текстовый виджет в конструкторе сайта

Добавьте параметр к ссылке

Просмотрите результат

Начните пользоваться сервисом SendPulse прямо сегодня