Создать динамические URL в HTML на основе JavaScript
Провожу эксперимент с использованием AMT Amazon Mechanical Turk , требуется перенаправлять пользователей с AMT по ссылке на сервер, где они, собственно, принимают участие в эксперименте.
В чем суть проблемы?
Чтобы попасть на сервер, пользователям требуется ввести логин и пароль. У каждого пользователя на AMT имеется ID код, по которому я могу их распознавать — этот ID выполняет функцию логина. Пароли я генерирую заранее (токены), выглядят они примерно так: 4801151f-7489-49cc-a9ce-9c027fe43fcd . Страница задания написана в html ,
цель: написать код, который бы создавал динамические ссылки для каждого пользователя индивидуально.
Пример такой ссылки (шаблон):
http://127.0.0.1:8000/?name=AMAZON_ID_NUMBER_IS_HERE&token=TOKEN_IS_HERE .
То есть ссылка сама выглядит как ниже (с изменяющимся токеном и id)
http://127.0.0.1:8000/?name=AD11235543&token=36473gv-dbdb543-rhr35-edef
Попытался поработать над кодом, но я что-то делаю не так.
Все оказалось проще, чем я думал. Но есть другая проблема: на место токена требуется вставлять всякий раз новый токен. Токены хранятся в отдельном txt файле, который javascript должен считывать в html .
Как сделать ссылки динамичными?
но я хочу перебрать все это в функции foreach которая есть в php ( и не только — но мы сейчас про php )
у меня будут не важно сколько записей в базе данных — но по скольку я хочу что бы это был не просто метод вывода товара на сайте но и что бы в ней были динамические ссылки которые будут указывать на определенную страницу.
я не хочу писать такой кошмар —
самому писать это наверно как то не комельфо ( Искренно надеюсь что написал свой вопрос более чем понятно )
Как сделать динамическую ссылку
На данный момент для атрибуции установок мобильных приложений существуют два подхода:
-
Получение идентификатора устройства от рекламной сети (например idfa для ios) на котором пользователь кликнул на объявление
В существующих системах мобильной атрибуции используются либо оба из этих подходов, либо только связывание по идентификатору, но с появлением ios 14, для устройств apple возможность атрибутирования по idfa пропадет, и так или иначе, задача атрибуции установок будет решаться через fingerprint.
В этой статье, я рассмотрю возможность атрибуции и решению других задач на базе dynamic links от firebase. Так как firebase или app+web, позволяет также решить любые задачи по мобильной/веб аналитике и автоматизации маркетинга, dynamic links позволяет построить полноценную систему аналитики, без использования других сервисов.
В этой части, все довольно просто, google составил прекрасную документацию, от себя, хочу добавить, что реализации есть и для Cordova, на которой в последнее время все больше приложений.
Базово, dynamic links позволяют просто открыть ваше приложение по ссылке с сохранением параметров utm_source, utm_medium и utm_campaign, но также, есть возможность, используя Universal links для ios или App links для android, открывать конкретный экран приложения. Особенно полезно, это будет для ремаркетинговых кампаний, включая пуш уведомления.
В консоли firebase добавляем домен, на котором будут отображаться наши ссылки:
Существует четыре способа создать ссылку:
— из firebase console. Этот способ подойдет, для создания тестовых или статичных ссылок. Из плюсов этого метода, при использовании этих ссылок у вас будет статистика по использованию прямо в консоли.
— собрать ссылку в ручную. В реальной работе это самый удобный способ, который позволяет быстро собрать нужную ссылку по шаблону и автоматизировать их создание:
А также, используя rest api, вы можете сделать из этой длинной ссылки короткую.
— создать ссылку в приложении. Этот способ классно подойдёт для создания реферальной программы, где в utm_campaign, можно передать user_pseudo_id или user_id пользователя, который создает такую ссылку
Отладка ссылок
Если вы добавите к вашей ссылке параметр ?d=1 или &d=1, то увидите весь сценарий ее открытия, а также, возможные ошибки, если они есть.
Чтобы упросить создание ссылок через REST API, я написал небольшое расширение на google scripts, которое генерирует их автоматически.
Создаем динамические кнопочки-ссылки с помощью CSS
Чем привлекательны CSS — тем, что они часто, при создании тех или иных эффектов, позволяют заменить JavaScript. Вот и на этот раз каскадные таблицы стилей помогут нам сконструировать красивые динамические кнопочки.
Информацию, изложенную ниже, можно рассматривать как альтернативу способу создания универсальных графических кнопок и данный способ отчасти решает те же задачи.
- Растягиваются горизонтально в зависимости от длины текста.
- Могут иметь углы нужной формы, выполненной в рисунке.
- Делают всю площадь кликабельной.
- Остаются удобочитаемыми при отключении изображений.
Особенность кнопки заключается в ее динамике, т.е. меняется ее графическое представление в разных состояниях:
- по умолчанию;
- при наведении курсора;
- при нажатии на кнопку.
Динамическая кнопка с двойным эффектом
Создадим кнопку на CSS, которая имеет только 2 состояния: «по умолчанию» и «при наведении курсора«.
Наша кнопка основана на использовании тега a со вложенным в него тегом span , каждый из которых использует различные слои фонового изображения. Для получения возможности растяжки фона при увеличении размера кнопки по горизонтали задействуем так называемую технику «раздвижных дверей». Вот так выглядит кнопка-ссылка в части HTML-кода:
Как видите, код максимально прост. Далее нам нужно создать изображения кнопки в обоих состояниях. Для этого я воспользовался программой «Crystal Button«. Вот что у меня получилось:
Дефолтная При наведении мыши
Оба состояния кнопки мы поместим в одно изображение (для каждого из тегов a и span ) и для смены с нормального состояния в «hover» будем смещать фоновое изображение по вертикали, CSS легко нам в этом поможет (о плюсах совмещения изображений в одно рассказано в статье «Оптимизация: используем одно изображение вместо двух»). Часть изображения, которая будет растягиваться в зависимости от текста, сделаем, к примеру, длиной в 350 пикселей (в зависимости от предполагаемой длины кнопок можно подобрать необходимую длину этой части). Высота нашей кнопки составляет 33 пикселя.
Для получения нужного эффекта раньше я прибегал к помощи JavaScript, CSS при этом вообще не использовался. HTML-код был следующим:
Соответственно, если у посетителя сайта отключен JavaScript, никакого эффекта наших красивых динамических кнопок он не увидит. Каскадные таблицы стилей помогут нам избавиться от этого недостатка.
Попробуем сделать точно такую же кнопку, используя CSS вместо JavaScript.
Код, которым оформим кнопочки «по умолчанию»:
Необходимо учитывать, что высота строки и вертикальные отступы, заданные для span , в сумме должны с точностью равняться высоте изображения (в нашем примере — 33px). Если бы изображение не имело тени, то можно было бы просто указать высоту строки, равной 33px, тогда текст сразу поместился бы вертикально посередине.
Сейчас добавим эффект, который появляется при наведении курса мыши на кнопку:
Готово! Вот что у нас получилось.
Динамическая кнопка с тройным эффектом
Мы пойдем еще дальше и добавим для нашей кнопки-ссылки еще один эффект, который проявляется при нажатии на кнопку. Соответственно для наших изображений мы добавляем еще одно состояние.
Осталось дописать чуток CSS для третьего состояния кнопки-ссылки:
Готово! Можно кликать!
Получается вполне симпатично, не правда ли? 🙂
По желанию, для всех трех состояний кнопки можно установить фоновый цвет, на случай, если в браузере пользователя отключен показ изображений. В таком случае достаточно классам a.button , a.button:hover и a.button:active добавить свойство background-color .
Исправляем баг
В браузерах Opera и Internet Explorer наблюдается следующий баг — в них всякий раз, когда кнопка «отпущена», она не возвращается в состояние по умолчанию. Кстати, в ранних версиях Оперы такого бага не наблюдалось. Чтобы устранить эту неприятность, для тега а приходится использовать небольшой код JavaScript. Таким образом html-код кнопки будет выглядеть следующим образом: