(Рассылка) Интеграция с MailerLite

Чтобы подключить Mailer Lite:

Шаг 1
Создайте группу подписчиков, перейдя по этой ссылке, если еще не сделали этого ранее. Название для группы можно указать любое:

Шаг 2
Перейдите на вкладку "Формы" и создайте "Встраиваемую форму". Название для формы также можно указать любое:

Шаг 3
В интерфейсе редактирования формы удалите заголовок формы нажатием на соответствующую иконку:

Шаг 4 Добавьте в форму новые поля, точно такие же, как на следующих скриншотах:

• Поле "Name":

• Поле "Phone":

• Поле "Comment":

Шаг 5
Убедитесь, что все поля соответствуют скриншотам и сохраните изменения нажатием на кнопку "Сохранить":

Важно! Необходимо снять галочки для обязательных полей, иначе форма не будет отправляться в mailerlite

Шаг 6
Нажмите кнопку "Next" для перехода к следующему шагу:

Шаг 7 Прокрутите страницу вниз и скопируйте первую часть кода сниппета JavaScript:

В Creatium создайте плагин "Свой код":

В поле "Перед </ head>" добавьте скопированный код:

В поле "Перед </ body>" добавьте код:

<!-- MailerLite Creatium -->
<script type="text/javascript">
/**
 * v1.0
 */
cr.api(function(page) {
    page.on('before-form-submit', function(e) {
        var mlform = $('.ml-block-form')

        if ( !mlform.length ) {
            console.log('Заявка не отправлена в MailerLite: не загружен код формы')
            return
        }

        var email = getValue(e.form.fields, 'email')

        if ( !email ) {
            console.log('Заявка не отправлена в MailerLite: не указан Email')
            return
        }

        var formData = {
            email: email,
            name: getValue(e.form.fields, 'name'),
            phone: getValue(e.form.fields, 'phone'),
            comment: getValue(e.form.fields, 'comment')
        }

        $('.ml-field-email input').val(email)
        $('.ml-field-name input').val( formData.name )
        $('.ml-field-phone input').val( formData.phone )
        $('.ml-field-zip input').val( formData.comment )
        mlform.submit()

        console.log('Заявка отправлена в MailerLite')
        console.log('ml-data', formData)
    })

    function getValue(fields, type) {
        if (type == 'comment') {
            fields = getExtFields(fields)
            return getValueByExtFields(fields)
        } else {
            var field = getFieldByType(fields, type)
            return field ? field.value : ''
        }
    }
    function getExtFields(fields) {
        return fields.filter(function(field) {
            return !field.type
        })
    }
    function getValueByExtFields(fields) {
        if (!fields) return ''
        var value = ''
        fields.forEach(function(field) {
            if (!field.value) return
            var string = getStringByValue(field.value)
            string || string === 0
                ? value += value
                    ? `; ${field.name}: ${string}`
                    : `${field.name}: ${string}`
                : false
        })
        return value
    }
    function getStringByObject(object) {
        var string = ''
        for (var key in object) {
            object[key] 
                ? string += string ? ', ' + key : key
                : false
        }
        return string
    }
    function getStringByBoolean(boolean) {
        return boolean ? 'Да' : 'Нет'
    }
    function getFileNameByArray(arr) {
        return arr[0] 
            ? arr[0].replace(/.+\/([^\/]+)$/, '$1') 
            : undefined
    }
    function getFieldByType(fields, type) {
        for (var field of fields) {
            if (field.type == type) return field
        }
        return
    }
    function getStringByValue(value) {
        if ( Array.isArray(value) )
            return getFileNameByArray(value)
        else if ( typeof value == 'object' )  
            return getStringByObject(value)
        else if ( typeof value == 'boolean' ) 
            return getStringByBoolean(value)
        else return value
    }
})
</script>
<!-- /MailerLite Creatium -->

Сохраните изменения:

Шаг 8

Вернитесь к сниппету JavaScript в Mailer Lite и скопируйте вторую часть кода

Шаг 9

На каждой странице вашего сайта, с которой должны передаваться данные, создайте виджет "Вставка HTML-кода" и добавьте в него скопированный код.

• На одной странице нужен только один такой виджет
• Виджет можно добавить в любое место на странице, но не внутри форм

Укажите для этого виджета класс "hidden", без кавычек:

Переопубликуйте страницу✅

Теперь заявки со всех форм на этой странице будут передаваться в Mailer Lite.

❗Важно: при открытии страницы скрипт сервиса MailerLite может быть заблокирован блокировщиком рекламы, таким как AdBlock, AdGuard и другие. Поэтому отключите его на своей странице перед проверкой интеграции на работоспособность.*