Слишком большой размер JS кода [для Google Tag Manager]

Вопрос-ответ JavaScript
1

Приветствую!

Google Tag Manager (GTM) при сохранении кода в custom HTML tag ругается, что он больше 102400 символов.

Сам я только начинаю осваивать JS. Подскажите, пожалуйста, как эффективнее уменьшить размер кода так, чтобы это не повлияло на скорость отработки этого custom HTML tag.

Изначально код имеет подобный вид (только в моем случае размер кода значительно больше):

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
// Define JavaScript for each page variation of this experiment.
var pageVariations = [
  function() {},  // Original: Do nothing. This will render the default HTML.
  function() {    // Variation 1: Banner Image
    document.getElementById('banner').src = 'bay-bridge.jpg';
  },
  function() {    // Variation 2: Sub-heading Text
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
  },
  function() {    // Variation 3: Button Text
    document.getElementById('button').innerHTML = 'Learn more';
  },
  function() {    // Variation 4: Button Color
    document.getElementById('button').className = 'button button-blue';
  }
];

// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(function(){
  // Execute the chosen view
  pageVariations[chosenVariation]
});
</script>

Как вариант я думаю сохранить каждый Variation в отдельный js файл на сервера сайта и в custom HTML tag прописывать не весь код, изменяющий страницу, а только код запрашивающий внешний код, который сохранен на сервере сайта.
Это верное решение?

Вот так:

          function() {    // Variation 1: Banner Image
       var script = document.createElement('script');
       script.src = 'mysite.com/js/variation1.js';
       var head = document.getElementsByTagName("head")[0];
       head.appendChild(script);
          },
2

Да, уточню. Размер кода большой за счет большого кол-ва изменений на странице, то есть в 1 вариации кода может быть очень много. Примерно так:

  document.getElementById('heading').innerHTML = 'Look, a Bridge!';
 document.getElementById('timeline').outerHTML= ''; 
 document.getElementById('table_div').outerHTML= ''; 
 //Удаляем текст под заголовком
 document.getElementsByClassName("col-lg-12 text-center")[2].getElementsByTagName("p")[1].outerHTML = ''; 
 document.getElementsByClassName("col-lg-12 text-center")[2].getElementsByTagName("p")[1].outerHTML = ''; 
 //Restore pie-charts style
 document.querySelectorAll('canvas')[0].style.display = 'block'; 
 document.querySelectorAll('canvas')[1].style.display = 'block'; 
 document.querySelectorAll('canvas')[2].style.display = 'block'; 
 document.getElementsByClassName('chart-content')[0].style.marginTop= "0"; 
 document.getElementsByClassName('chart-content')[1].style.marginTop= "0"; 
 document.getElementsByClassName('chart-content')[2].style.marginTop= "0"; 
 document.getElementsByClassName('chart')[0].style.width = "230px"; 
 document.getElementsByClassName('chart')[1].style.width = "230px"; 
 document.getElementsByClassName('chart')[2].style.width = "230px"; 
    document.getElementById('heading').innerHTML = 'Look, a Bridge!';
    blablabla....................

Глобально руками переписывать код долго, поэтому не рассматриваю пока этот вариант. Надо было учесть это до. Не знал, что упрусь в ограничения.

3

Да вполне для той ситуации в которой ты оказался.

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

Прописал бы стили-модификаторы для класса-варианта. И в custom tag менял бы сам класс у body. Для большинства случаев достаточно, и удобно: единственный рубильник для включения своего варианта.

/* Элементы, которые не отображаются в определенном варианте скрываешь классом */
.v1.timeline {display: none}
.v1.table_div {display: none}

/* Пример как показывать несколько текстов для разных вариантов.
Помещаешь в DOM все варианты, скрываешь все, и показываешь один только 
при наличии соответствующего класса */
.heading .v1_text,
.heading .v2_text,
.heading .v3_text {
    display: none;
}
.v1.heading .v1_text {display: block}

// Включение варианта.
// Использу document.documentElement потому что этот узел есть всегда,
// даже если страница не догрузилась до конца
document.documentElement.classList.add('v1')
1 лайк