Как в коде вывести самый кликабельный блок первым?

12
GY
На сайте с 30.04.2009
Offline
47
2408

Нашел на форуме сообщение с описанием вывода нужного блока первым с помощью javascript

/ru/forum/comment/8990088

Вариант с javascript интересный, но я не понял как он работает.

profeto, не могли бы Вы разъяснить как скрипт работает?

Вот у меня три блока:

№1 верх статьи (Полноразмерный баннер (728x90) -- графика и текст);

№2 низ статьи (Большой прямоугольник (336x280) -- только графика);

№3 низ статьи справа от №2 (Большой прямоугольник (336x280) -- только текст).

Больше всего кликают по №3, затем №1 и потом №2. Хотелось бы именно в такой последовательности и выводить блоки.

---------- Добавлено 17.07.2013 в 15:35 ----------

Можно конечно вывести и посредством css, через позиционирование нужного блока в нужном месте, но мне кажется это сложнее чем через javascript.

profeto
На сайте с 30.03.2010
Offline
65
#1

А что непонятного-то? Вроде доступно написал. В вашем случае третий блок останется без изменений, а вместо первого и второго в коде будет, соответственно:

<div id="adshow1"></div>

и

<div id="adshow2"></div>

А уже после третьего блока можно вставить остальной код:

<div id="ad1" style="display: none;">
<!--- БЛОК ADSENSE 1--->
</div>
<div id="ad2" style="display: none;">
<!--- БЛОК ADSENSE 2--->
</div>
<script type='text/javascript'>
var obj0=document.getElementById("adshow1");
var obj1=document.getElementById("ad1");
var obj2=document.getElementById("adshow2");
var obj3=document.getElementById("ad2");
obj0.innerHTML = obj1.innerHTML;
obj2.innerHTML = obj3.innerHTML;
</script>
87793
На сайте с 12.09.2009
Offline
661
#2

А почему дивам ad1 и ad2 "display: none;" ? 😕

Наше дело правое - не мешать левому!
profeto
На сайте с 30.03.2010
Offline
65
#3
87793:
А почему дивам ad1 и ad2 "display: none;" ? 😕

Потому что эти блоки в итоге отображаются в других дивах - adshow1 и adshow2.

87793
На сайте с 12.09.2009
Offline
661
#4

Тады логично 😂

GY
На сайте с 30.04.2009
Offline
47
#5

У меня CMS DLE, и блоки я вывожу след. образом:

в шаблон сайта в нужное место ставлю тег: {banner_adshow1}. В Админке с разделе "Рекламные материалы" создаю одноименный баннер "adshow1" с содержимым кода блока №1. Аналогично поступаю с оставшимися двумя блоками ({banner_adshow2} и {banner_adshow3}).

profeto, если воспользоваться Вашим скриптом, то мне надо:

1) в шаблон сайта в нужное место вставить: <div id="adshow1"></div> (для ADSENSE 1); <div id="adshow2"></div> (для ADSENSE 2); {banner_adshow3} (для вывода ADSENSE 3 из админки);

2) в админке создать новый баннер "adshow3" с кодом:

<!--- БЛОК ADSENSE 3--->
<div id="ad1" style="display: none;">
<!--- БЛОК ADSENSE 1--->
</div>
<div id="ad2" style="display: none;">
<!--- БЛОК ADSENSE 2--->
</div>
<script type='text/javascript'>
var obj0=document.getElementById("adshow1");
var obj1=document.getElementById("ad1");
var obj2=document.getElementById("adshow2");
var obj3=document.getElementById("ad2");
obj0.innerHTML = obj1.innerHTML;
obj2.innerHTML = obj3.innerHTML;
</script>

Тогда CMSка в шаблон вместо тега {banner_adshow3} выведет код блока №3 (как самый первый) и +джаваскрит, который, в свою очередь, определить последовательность загрузки в HTMLе блока №1 и только потом №2.

Всё верно?

profeto
На сайте с 30.03.2010
Offline
65
#6

GrafYa, да, всё верно.

GY
На сайте с 30.04.2009
Offline
47
#7

Отлично, тогда поэкспериментирую.

profeto, а как можно проверить, работает ли скрипт? Есть какой-то инструмент вебмастера который бы показал порядок загрузки?

profeto
На сайте с 30.03.2010
Offline
65
#8
Есть какой-то инструмент вебмастера который бы показал порядок загрузки?

Блоки загружаются в том порядке, в котором они размещены в исходном коде. В данном случае в исходном коде у вас будет сначала 3 блок, потом 1 и 2.

С
На сайте с 12.03.2013
Offline
46
#9

А разве нельзя сделать проще, как рекомендует сам Гугл?

Первый рекламный блок важнее всего

Самый эффективный рекламный блок с наивысшим показателем CTR должен идти первым в HTML-коде страницы. Это позволит получать больше дохода.

Во-первых, необходимо поместить тег DIV непосредственно под тегом BODY. Тогда браузер будет знать, какой рекламный блок идет первым в исходном HTML-коде. Однако этот блок не обязательно будет отображаться первым на странице. Используйте следующий код:

<div id=”ad1″>
Вставьте в этом месте свой рекламный код.
</div>

Затем добавьте приведенный ниже код CSS в таблицу стилей вашего сайта. Мы также рекомендуем предварительно протестировать атрибуты (left – слева, right – справа, top – вверху, bottom – внизу), чтобы при размещении блока на вашей странице не возникли ошибки. Не забудьте скорректировать высоту (height) и ширину (width) в зависимости от формата объявления.

#ad1 {
width: 468px;
height: 60px;
position: absolute;
left: 140px;
right: 0px;
bottom: 0px;
top: 350px;
}

Если вы не используете таблицы стилей, вставьте приведенный выше код в теги DIV между тегами HEAD исходного HTML-кода.

<style type=”text/css”>
Вставьте в этом месте приведенный выше код CSS.
</style>
B
На сайте с 13.02.2008
Offline
262
#10
Сержио:
А разве нельзя сделать проще, как рекомендует сам Гугл?

Я видел эту рекомендацию, но так и не понял, какой от нее толк. Например, мне нужно, чтобы первый блок располагался ПОД статьей. В данном примере будет просто абсолютный сдвиг ровно и жестко на 350 точек вниз. Но мне то нужно сместить этот блок под статью, высота которой (размер статьи) неизвестна. Поэтому такое позиционирование не годится.

Похоже, джава скриптом поменять объявления - самый простой вариант. Только я бы тупо поменял местами рекламные дивы без заморочек с display:none. Тем более у меня серху и снизу блоки одинаковые по размеру. Надо будет попробовать.

Типа:


<div id="adsense_block_bottom">
<!--- БЛОК ADSENSE BOTTOM --->
</div>
<div id="content">
<!--- CONTENT --->
</div>
<div id="adsense_block_top">
<!--- БЛОК ADSENSE TOP --->
</div>
<script type='text/javascript'>
var adsense_block_top_code=document.getElementById("adsense_block_top").innerHTML;
document.getElementById("adsense_block_top").innerHTML=document.getElementById("adsense_block_bottom").innerHTML;
document.getElementById("adsense_block_bottom").innerHTML = adsense_block_top_code;
</script>
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий