Курс Таблицы Google → Замена контента страницы в зависимости от utm-меток

Привет!

В интернете уже есть статьи с решением этого вопроса, но есть недостатки — тяжело настраивать и управлять. Я очень ценю труд и время маркетологов, поэтому хочется сделать их работу максимально комфортной и простой.

Поэтому, если управлять динамическим контентом — то через Google-таблицы. Круто же?

Давайте разбираться.

Содержание

Описание примера

В инструкции будем смотреть за результатом на странице: http://gtm.marketello.ru/

Будем использовать utm-параметры:

utm_source
utm_medium
utm_campaign
utm_term

Заменять контент будем в зависимости от utm_term. Получается, первые 3 параметра будут одинаковыми.

Заменять будем контент в этих блоках (css-селекторы):

div.site-branding h1 > a
.site-description
#content > div > header > h2

Приступаем к настройке!

Шаг 1. Подготовка таблицы

Открываем таблицу и делаем её копию.

Первая строка — системная, там задаём utm-метки с которыми будем работать и CSS-селекторы элементов, которые будем обновлять.

Следующие строки — это уже информация о подмене контента. Скрипт будет искать соответствие utm-меток и их значений с информацией в строке. Если будет найдена подходящая строка — таблица передаст информацию о обновлении контента на вашу страницу.

Важно!

Удалите лишние колонки с utm_ или добавьте новые, если вы хотите использовать другие (важно, параметр должен начинаться с utm_).
Название листа не изменяем (там в коде есть подвязка). Не путаем название документа с названием листа :).

Шаг 2. Публикуем таблицу как веб-приложение

Открываем раздел Script editor

Теперь открываем раздел Publish — Deploy as web app:

И выбираем следующие настройки:

Далее нужно будет пройти процесс авторизации. Следуем подсказкам, но тут может возникнуть сложность:

Нужно нажать Advanced и Go to Untitled project.

После вам будет предоставлена ссылка, её нужно скопировать и сохранить!

Для самых любопытных, внутри таблицы есть скрипт:

var doc     = SpreadsheetApp.getActiveSpreadsheet(),
    sheet   = doc.getSheetByName('Sheet1'); // select the responses sheet

function checkRow(row,params, mapping) {
  if (Object.keys(params).length == 0){
    return false;
  }
  
  var result = row;
  Object.keys(params).forEach(function(key) {
    Logger.log(decode(params[key]) + " | " + row[mapping[key]-1]);
    Logger.log(row[mapping[key]-1] == decode(params[key]));
    if(mapping[key]) {
       if(!(row[mapping[key]-1] == decode(params[key]))) {
            result = false; 
       }
    }
  });
  return result;
}

function getData(mapping,params){
  var result = {},
      values = sheet.getRange("A:Z").getValues(),
      last_row = parseInt(sheet.getLastRow());
    
   for (var i = 1; i < last_row; i++) { // start at 1 to avoid Timestamp column
     var foundRow = checkRow(values[i],params,mapping);
     Logger.log(foundRow);
     if(foundRow != false) {
       for (var a = 0; a < foundRow.length; a++) {
         if(values[0][a].indexOf('utm_') == -1 && values[0][a] != ''){
            result[values[0][a]] = foundRow[a];
         } 
       }
       break;
     }
   }
   return result;

}

function columns_mapping(params){
  var mapping = {};
  params.forEach(function(param_name){
    for(i=1;i<sheet.getLastColumn();i++) {
      if (sheet.getRange(1,i).getValue() == param_name) {
        mapping[param_name] = i;
      }
    }
  });
  return mapping;
}

function decode(encoded) {
   return decodeURIComponent(encoded.toString().replace(/\+/g,  " "))
}

function doGet(e) {
  var params = e.parameters,
      params_keys = Object.keys(e.parameters),
      mapping = columns_mapping(params_keys),
      data = getData(mapping,params);
  
  return ContentService    // return json success results
          .createTextOutput(
            JSON.stringify({"status":"ok",
                            "result": JSON.stringify(data) }))
          .setMimeType(ContentService.MimeType.JSON);
}

Шаг 3. Добавляем HTML-код на страницу

Теперь нужно добавить небольшой код на вашу страницу:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script>
     
     
     $(document).ready(function(){
       /* функция для получения get-параметров/utm-меток */
       function getUtmTags()
       {
         var vars = [], hash;
         var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
         for(var i = 0; i < hashes.length; i++)
         {
           hash = hashes[i].split('=');
           if(hash[0].indexOf('utm_') > -1) {
             //vars.push(hash[0]);
             vars[hash[0]] = hash[1];
           }
           
         }
         return vars;
       }
       
       /* получение информации из Таблицы Google */
       var utm_tags =   getUtmTags(),
         utm_tags_uri = '',
         spreadsheetApp = 'https://script.google.com/macros/s/AKfycbzTRZGcell6GHzCYusGOhOhPNzNpxNay226frFoD9EN5sfztqg/exec';

       for (key in utm_tags) {
         utm_tags_uri += encodeURIComponent(key)+"="+encodeURIComponent(utm_tags[key])+"&";
       }
       // удаляем последний &
       utm_tags_uri = utm_tags_uri.substring(0, utm_tags_uri.length - 1);
       var	spreadsheetAppUrl = spreadsheetApp + '?' + utm_tags_uri;
       $.getJSON(spreadsheetAppUrl, function( json ) {
         var result = JSON.parse(json.result);
         /* Обновление контента по css-селекторам */
         $.each(result, function(key,value){
           if(key.length > 0 && value.length > 0 && value != ''){
             $(key).html(value);
           }
         });
        });
     
     });
     
   </script>

В этом коде нужно найти параметр spreadsheetApp(строка 26) и вставить в него ссылку, которую скопировали на предыдущем шаге.

Можно прокинуть через GTM или через исходный код страницы.

Проверяем

Открываем:

Смотрим как меняется контент на странице.

Важно!

На больших объемах просмотров лендига (от 1000 в сутки) — нужно тестировать, лучше всего подключать кеширование через разработчиков.
Скорость замены контента на странице зависит от качества интернета пользователя (идёт обращение к таблице Google по API).
Это не таблетка от всех заболеваний, могут быть ошибки — пишите в личные сообщения.

И что теперь?

Теперь вы можете заменять блоки на странице через Таблицу Google. Круто же? 🙂
В текущей реализации — для каждого из лендингов нужно создавать отдельную гугл-таблицу.

Буду признателен, если пошарите эту статью с коллегами-маркетологами.

Успехов!

Твои коллеги будут рады, поделись в