{"_id":"57d698404340330e00953c78","user":"564f641651f2ec0d001d6998","project":"564f643f33082f0d001bb714","version":{"_id":"57d698404340330e00953c6c","project":"564f643f33082f0d001bb714","__v":2,"createdAt":"2016-09-12T11:57:52.437Z","releaseDate":"2016-09-12T11:57:52.437Z","categories":["57d698404340330e00953c6d","57d698404340330e00953c6e","57d698404340330e00953c6f","57d698404340330e00953c70","57d698404340330e00953c71","57d698404340330e00953c72","57d698404340330e00953c73","58a5711c79ac232f00cbadb5"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1"},"parentDoc":null,"__v":0,"category":{"_id":"57d698404340330e00953c70","version":"57d698404340330e00953c6c","__v":0,"project":"564f643f33082f0d001bb714","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-09-02T11:53:18.476Z","from_sync":false,"order":3,"slug":"digital-data-manager","title":"Digital Data Manager"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-07T09:17:38.740Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"Digital Data Manager помогает отслеживать попадание определенного блока страницы в зону видимости пользователя.\n\nПредположим, на карточке товара есть блок рекомендаций, однако, он не виден на большинстве мониторов, т.к. не попадает в зону видимости. Он становится виден пользователю только если тот проскроллит страницу немного вниз.\n\nПри загрузке, страница карточки товара может выглядеть так:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/347fb48-_Lacoste_732SPW0107003T_________-.__9_480_._2016-09-07_12-38-47.png\",\n        \"Кеды Lacoste 732SPW0107003T втачная стелька, кеды завязываются на шнурки, купить в интернет-магазине. Цена: 9 480 р. 2016-09-07 12-38-47.png\",\n        1044,\n        815,\n        \"#e2c2c3\"\n      ]\n    }\n  ]\n}\n[/block]\n\nТоварные рекомендации видны только при скролле страницы:\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/4e9b5cc-_Lacoste_732SPW0107003T_________-.__9_480_._2016-09-07_12-43-53.png\",\n        \"Кеды Lacoste 732SPW0107003T втачная стелька, кеды завязываются на шнурки, купить в интернет-магазине. Цена: 9 480 р. 2016-09-07 12-43-53.png\",\n        1120,\n        814,\n        \"#eae8e7\"\n      ]\n    }\n  ]\n}\n[/block]\nДля того, чтобы правильно отследить просмотр (Impression) такого блока, необходимо выполнить следующий код.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.ddListener.push(['on', 'view:#recommendation-block', function(elements) {\\n\\tconsole.log('Блок рекомендаций был увиден пользователем');\\n}]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"CSS селектор #recommendation-block приведен для примера.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Отслеживание просмотра товаров\"\n}\n[/block]\nДля того, чтобы вам было удобно отслеживать попадание товаров из листинга в зону видимости экрана, мы рекомендуем присвоить уникальный класс родительскому элементу каждого товара. Этот элемент должен определять зону видимости товара.\n\nПример:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1dcdeaa-Butik.ru______-_2016-2017_______2016-09-07_12-50-25.png\",\n        \"Butik.ru: купить модные женские комбинезоны сезона осень-зима 2016-2017 в интернет магазине одежды и обуви 2016-09-07 12-50-25.png\",\n        1201,\n        778,\n        \"#e9ded8\"\n      ]\n    }\n  ]\n}\n[/block]\nТеперь, вы легко можете настроить отслеживание просмотра товаров при помощи следующего кода:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// получаем все элементы с классом ddl_product, которые попали в зону видимости пользователя\\nwindow.ddListener.push(['on', 'view:.ddl_product', function(elements) {\\n\\tconsole.log('Пользователь увидел', elements.length, 'товара');\\n}]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nРезультат:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"# Пользователь увидел 4 товара\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nДля того, чтобы получить больше информации о каждом товаре, можно к родительским элементам с классом '.ddl_product' добавить дополнительные data-аттрибуты.\n\nНапример:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"ddl_product\\\" data-product-id=\\\"123\\\" data-list-id=\\\"main\\\">\\n  ...\\n  ...\\n</div>\\n\\n<div class=\\\"ddl_product\\\" data-product-id=\\\"234\\\" data-list-id=\\\"main\\\">\\n  ...\\n  ...\\n</div>\\n\\n...\\n...\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nВ этом случае, у вас будут все необходимые данные, для отправки семантического событие [Viewed Product](https://digitaldata.readme.io/docs/семантические-события#ecommerce--viewed-product) при помощи автоматически [обогащенных данных](https://digitaldata.readme.io/docs/обогащение-данными#-----):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// получаем все элементы с классом ddl_product, которые попали в зону видимости пользователя\\nddListener.push(['on', 'view:.ddl_product', function(elements) {\\n  var viewedListItems = [];\\n  \\n  // получаем id товара и id товарного списка для каждого элемента\\n  jQuery.each(elements, function() {\\n    var productId = jQuery(this).data('product-id');\\n    var listId = jQuery(this).data('list-id');\\n    viewedListItems.push({\\n      'product': productId, //данные о продукте берутся из DDL\\n      'listId': listId\\n    });\\n  });\\n  \\n  // отправляем событие просмотра товаров\\n  digitalData.events.push({\\n    'name': 'Viewed Product',\\n    'listItems': viewedListItems\\n  });\\n}]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Отслеживание просмотра внутренних промо\"\n}\n[/block]\nДля того, чтобы вам было удобно отслеживать попадание баннера (внутреннего промо) из  в зону видимости экрана, мы рекомендуем присвоить уникальный класс родительскому элементу каждого баннера. Этот элемент должен определять зону видимости товара.\n\nПример:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2fc99a2-._______2016-09-07_13-14-43.png\",\n        \"Бутик.ру Интернет магазин одежды, сумок, обуви, аксессуаров 2016-09-07 13-14-43.png\",\n        1105,\n        814,\n        \"#21262d\"\n      ]\n    }\n  ]\n}\n[/block]\nТеперь, вы легко можете настроить отслеживание просмотра баннеров (внутренних промо) при помощи следующего кода:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// получаем все элементы с классом ddl_campaign, которые попали в зону видимости пользователя\\nwindow.ddListener.push(['on', 'view:.ddl_campaign', function(elements) {\\n\\tconsole.log('Пользователь увидел', elements.length, 'баннера');\\n}]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nРезультат:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"# Пользователь увидел 4 баннера\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nДля того, чтобы получить больше информации о каждой кампании, можно к родительским элементам с классом '.ddl_campaign' добавить дополнительные data-аттрибуты.\n\nНапример:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"ddl_campaign\\\" data-campaign-id=\\\"123\\\">\\n  ...\\n  ...\\n</div>\\n\\n<div class=\\\"ddl_campaign\\\" data-campaign-id=\\\"234\\\">\\n  ...\\n  ...\\n</div>\\n\\n...\\n...\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nВ этом случае, у вас будут все необходимые данные, для отправки семантического событие Viewed Campaign при помощи автоматически обогащенных данных:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// получаем все элементы с классом ddl_campaign, которые попали в зону видимости пользователя\\nddListener.push(['on', 'view:.ddl_campaign', function(elements) {\\n  var viewedCampaigns = [];\\n  \\n  // получаем id кампании для каждого элемента\\n  jQuery.each(elements, function() {\\n    var campaignId = jQuery(this).data('campaign-id'); // получаем campaignId из data-атрибута\\n    viewedCampaigns.push(campaignId);\\n  });\\n  \\n  // отправляем событие просмотра кампании (impressions)\\n  digitalData.events.push({\\n    'name': 'Viewed Campaign',\\n    'campaigns': viewedCampaigns // данные о кампаниях берутся из DDL по ID\\n  });\\n}]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"отслеживание-просмотра-блоков-сайта","type":"basic","title":"Отслеживание блоков страницы"}

Отслеживание блоков страницы


Digital Data Manager помогает отслеживать попадание определенного блока страницы в зону видимости пользователя. Предположим, на карточке товара есть блок рекомендаций, однако, он не виден на большинстве мониторов, т.к. не попадает в зону видимости. Он становится виден пользователю только если тот проскроллит страницу немного вниз. При загрузке, страница карточки товара может выглядеть так: [block:image] { "images": [ { "image": [ "https://files.readme.io/347fb48-_Lacoste_732SPW0107003T_________-.__9_480_._2016-09-07_12-38-47.png", "Кеды Lacoste 732SPW0107003T втачная стелька, кеды завязываются на шнурки, купить в интернет-магазине. Цена: 9 480 р. 2016-09-07 12-38-47.png", 1044, 815, "#e2c2c3" ] } ] } [/block] Товарные рекомендации видны только при скролле страницы: [block:image] { "images": [ { "image": [ "https://files.readme.io/4e9b5cc-_Lacoste_732SPW0107003T_________-.__9_480_._2016-09-07_12-43-53.png", "Кеды Lacoste 732SPW0107003T втачная стелька, кеды завязываются на шнурки, купить в интернет-магазине. Цена: 9 480 р. 2016-09-07 12-43-53.png", 1120, 814, "#eae8e7" ] } ] } [/block] Для того, чтобы правильно отследить просмотр (Impression) такого блока, необходимо выполнить следующий код. [block:code] { "codes": [ { "code": "window.ddListener.push(['on', 'view:#recommendation-block', function(elements) {\n\tconsole.log('Блок рекомендаций был увиден пользователем');\n}]);", "language": "javascript" } ] } [/block] [block:callout] { "type": "info", "body": "CSS селектор #recommendation-block приведен для примера." } [/block] [block:api-header] { "type": "basic", "title": "Отслеживание просмотра товаров" } [/block] Для того, чтобы вам было удобно отслеживать попадание товаров из листинга в зону видимости экрана, мы рекомендуем присвоить уникальный класс родительскому элементу каждого товара. Этот элемент должен определять зону видимости товара. Пример: [block:image] { "images": [ { "image": [ "https://files.readme.io/1dcdeaa-Butik.ru______-_2016-2017_______2016-09-07_12-50-25.png", "Butik.ru: купить модные женские комбинезоны сезона осень-зима 2016-2017 в интернет магазине одежды и обуви 2016-09-07 12-50-25.png", 1201, 778, "#e9ded8" ] } ] } [/block] Теперь, вы легко можете настроить отслеживание просмотра товаров при помощи следующего кода: [block:code] { "codes": [ { "code": "// получаем все элементы с классом ddl_product, которые попали в зону видимости пользователя\nwindow.ddListener.push(['on', 'view:.ddl_product', function(elements) {\n\tconsole.log('Пользователь увидел', elements.length, 'товара');\n}]);", "language": "javascript" } ] } [/block] Результат: [block:code] { "codes": [ { "code": "# Пользователь увидел 4 товара", "language": "text" } ] } [/block] Для того, чтобы получить больше информации о каждом товаре, можно к родительским элементам с классом '.ddl_product' добавить дополнительные data-аттрибуты. Например: [block:code] { "codes": [ { "code": "<div class=\"ddl_product\" data-product-id=\"123\" data-list-id=\"main\">\n ...\n ...\n</div>\n\n<div class=\"ddl_product\" data-product-id=\"234\" data-list-id=\"main\">\n ...\n ...\n</div>\n\n...\n...", "language": "html" } ] } [/block] В этом случае, у вас будут все необходимые данные, для отправки семантического событие [Viewed Product](https://digitaldata.readme.io/docs/семантические-события#ecommerce--viewed-product) при помощи автоматически [обогащенных данных](https://digitaldata.readme.io/docs/обогащение-данными#-----): [block:code] { "codes": [ { "code": "// получаем все элементы с классом ddl_product, которые попали в зону видимости пользователя\nddListener.push(['on', 'view:.ddl_product', function(elements) {\n var viewedListItems = [];\n \n // получаем id товара и id товарного списка для каждого элемента\n jQuery.each(elements, function() {\n var productId = jQuery(this).data('product-id');\n var listId = jQuery(this).data('list-id');\n viewedListItems.push({\n 'product': productId, //данные о продукте берутся из DDL\n 'listId': listId\n });\n });\n \n // отправляем событие просмотра товаров\n digitalData.events.push({\n 'name': 'Viewed Product',\n 'listItems': viewedListItems\n });\n}]);", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Отслеживание просмотра внутренних промо" } [/block] Для того, чтобы вам было удобно отслеживать попадание баннера (внутреннего промо) из в зону видимости экрана, мы рекомендуем присвоить уникальный класс родительскому элементу каждого баннера. Этот элемент должен определять зону видимости товара. Пример: [block:image] { "images": [ { "image": [ "https://files.readme.io/2fc99a2-._______2016-09-07_13-14-43.png", "Бутик.ру Интернет магазин одежды, сумок, обуви, аксессуаров 2016-09-07 13-14-43.png", 1105, 814, "#21262d" ] } ] } [/block] Теперь, вы легко можете настроить отслеживание просмотра баннеров (внутренних промо) при помощи следующего кода: [block:code] { "codes": [ { "code": "// получаем все элементы с классом ddl_campaign, которые попали в зону видимости пользователя\nwindow.ddListener.push(['on', 'view:.ddl_campaign', function(elements) {\n\tconsole.log('Пользователь увидел', elements.length, 'баннера');\n}]);", "language": "javascript" } ] } [/block] Результат: [block:code] { "codes": [ { "code": "# Пользователь увидел 4 баннера", "language": "text" } ] } [/block] Для того, чтобы получить больше информации о каждой кампании, можно к родительским элементам с классом '.ddl_campaign' добавить дополнительные data-аттрибуты. Например: [block:code] { "codes": [ { "code": "<div class=\"ddl_campaign\" data-campaign-id=\"123\">\n ...\n ...\n</div>\n\n<div class=\"ddl_campaign\" data-campaign-id=\"234\">\n ...\n ...\n</div>\n\n...\n...", "language": "javascript" } ] } [/block] В этом случае, у вас будут все необходимые данные, для отправки семантического событие Viewed Campaign при помощи автоматически обогащенных данных: [block:code] { "codes": [ { "code": "// получаем все элементы с классом ddl_campaign, которые попали в зону видимости пользователя\nddListener.push(['on', 'view:.ddl_campaign', function(elements) {\n var viewedCampaigns = [];\n \n // получаем id кампании для каждого элемента\n jQuery.each(elements, function() {\n var campaignId = jQuery(this).data('campaign-id'); // получаем campaignId из data-атрибута\n viewedCampaigns.push(campaignId);\n });\n \n // отправляем событие просмотра кампании (impressions)\n digitalData.events.push({\n 'name': 'Viewed Campaign',\n 'campaigns': viewedCampaigns // данные о кампаниях берутся из DDL по ID\n });\n}]);", "language": "javascript" } ] } [/block]