{"_id":"57d698404340330e00953c76","__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"},"parentDoc":null,"user":"564f641651f2ec0d001d6998","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"},"project":"564f643f33082f0d001bb714","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-11-22T18:15:54.911Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"Digital Data Manager имеет встроенный обработчик событий, который позволяет отслеживать все события, происходящие на странице, и сохранять их в унифицированном виде и в едином месте вашей модели данных.\n\nИспользуйте события для отслеживания действий пользователя на сайте, которые вы хотели бы использовать для сегментирования или аналитики, либо для реагирования в браузере. Например:\n\n* Пользователь добавил товар в корзину\n* Пользователь подписался на рассылку\n\nНаилучшей практикой определения перечня событий для DDL будет поинтересоваться у аналитиков или маркетинговой команды вашего сайта по поводу того, какие ключевые действия на сайте они хотели бы отслеживать, на какие события хотели бы реагировать.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Публикация событий\"\n}\n[/block]\nПриведенный ниже код обычно привязан к обработчику события jQuery (к примеру button click) или вызывается другим JavaScript обработчиком, с которым взаимодействует пользователь.\n\nВ этом примере мы хотим отслеживать добавление товара в корзину. Определение события в правильную категорию может существенно облегчить жизнь вашему аналитику в будущем.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Проверка существования DDL массива events\\nwindow.digitalData.events = window.digitalData.events || [];\\n\\n// Добавление нового события в массив events\\nwindow.digitalData.events.push({\\n  'name': 'Product Added',\\n  'product': {\\n  \\t'id': '123',\\n    'name': 'Test Product',\\n    'unitPrice': 100,\\n    'unitSalePrice': 75,\\n    'currency': 'USD'\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nЧитать [полную спецификацию объекта Event](/docs/описание-объектов#event).\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Профессиональный совет\",\n  \"body\": \"События DDL позволяют вам наилучшим образом разделить код ваших тегов и приложения, т.к. это единственный относящийся к сайту код, который вам необходимо реализовать. Все остальные скрипты и теги могут просто \\\"подписаться\\\" на события DDL.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Подписка и реагирование на события\"\n}\n[/block]\nПри помощи [Digital Data Manager](https://github.com/driveback/digital-data-manager) можно добавить функционал, который позволяет подписываться на события и реагировать на них.\n\nСамые простые кейсы могут выглядеть так:\n\n* Активировать определенный тег в GTM когда кто-нибудь отправляет заполненную форму регистрации.\n* Отправлять данные в какую-нибудь систему аналитики, когда кто-нибудь добавляет товар в корзину.\n\nЧтобы исполнить какой-либо код после публикации определенного события - просто добавьте его в DDL Listener, который является частью [Digital Data Manager](https://github.com/driveback/digital-data-manager)  и отслеживает все изменения внутри DDL, в том числе и публикацию новых событий.\n\nДля того, чтобы добавить новый обработчик событий - используйте массив window.ddListener как показано ниже:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Проверка существования ddListener массива\\nwindow.ddListener = window.ddListener || [];\\n\\n// Создание нового listener\\nwindow.ddListener.push(['on', 'event', function(event) {\\n\\n  // Проверка соответствия опубликованного event криетриям\\n  if (event.name === 'Added Product'){\\n\\n    //Отправка данных в систему аналитики\\n    sendData();\\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:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.ddListener.push(['on', 'beforeEvent', function(event) {\\n\\tevent.userId = window.digitalData.user.userId;\\n}]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## Пример 1:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.ddListener.push(['on', 'event', function(event) {\\n  if (event.name === 'Entered Birth Date') {\\n  \\tconsole.log(event.birthDate);\\n  }\\n}]);\\n\\nwindow.digitalData.events.push({\\n\\t'name': 'Entered Birth Date',\\n  'birthDate': {\\n  \\t'day': '23',\\n    'month': '10',\\n    'year': '1986'\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## Пример 2:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.ddListener.push(['on', 'beforeEvent', function(event) {\\n  if (event.name === 'Entered Birth Date') {\\n    var birthDate = event.birthDate;\\n  \\tevent.birthDate = [birthDate.year, birthDate.month, birthDate.day].join('-');\\n  }\\n}]);\\n\\nwindow.ddListener.push(['on', 'event', function(event) {\\n  if (event.name === 'Entered Birth Date') {\\n  \\tconsole.log(event.birthDate);\\n  }\\n}]);\\n\\nwindow.digitalData.events.push({\\n\\t'name': 'Entered Birth Date',\\n  'birthDate': {\\n  \\t'day': '23',\\n    'month': '10',\\n    'year': '1986'\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nРезультат:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"# 1986-10-23\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"работа-с-событиями","type":"basic","title":"Работа с событиями"}

Работа с событиями


Digital Data Manager имеет встроенный обработчик событий, который позволяет отслеживать все события, происходящие на странице, и сохранять их в унифицированном виде и в едином месте вашей модели данных. Используйте события для отслеживания действий пользователя на сайте, которые вы хотели бы использовать для сегментирования или аналитики, либо для реагирования в браузере. Например: * Пользователь добавил товар в корзину * Пользователь подписался на рассылку Наилучшей практикой определения перечня событий для DDL будет поинтересоваться у аналитиков или маркетинговой команды вашего сайта по поводу того, какие ключевые действия на сайте они хотели бы отслеживать, на какие события хотели бы реагировать. [block:api-header] { "type": "basic", "title": "Публикация событий" } [/block] Приведенный ниже код обычно привязан к обработчику события jQuery (к примеру button click) или вызывается другим JavaScript обработчиком, с которым взаимодействует пользователь. В этом примере мы хотим отслеживать добавление товара в корзину. Определение события в правильную категорию может существенно облегчить жизнь вашему аналитику в будущем. [block:code] { "codes": [ { "code": "// Проверка существования DDL массива events\nwindow.digitalData.events = window.digitalData.events || [];\n\n// Добавление нового события в массив events\nwindow.digitalData.events.push({\n 'name': 'Product Added',\n 'product': {\n \t'id': '123',\n 'name': 'Test Product',\n 'unitPrice': 100,\n 'unitSalePrice': 75,\n 'currency': 'USD'\n }\n});", "language": "javascript" } ] } [/block] Читать [полную спецификацию объекта Event](/docs/описание-объектов#event). [block:callout] { "type": "success", "title": "Профессиональный совет", "body": "События DDL позволяют вам наилучшим образом разделить код ваших тегов и приложения, т.к. это единственный относящийся к сайту код, который вам необходимо реализовать. Все остальные скрипты и теги могут просто \"подписаться\" на события DDL." } [/block] [block:api-header] { "type": "basic", "title": "Подписка и реагирование на события" } [/block] При помощи [Digital Data Manager](https://github.com/driveback/digital-data-manager) можно добавить функционал, который позволяет подписываться на события и реагировать на них. Самые простые кейсы могут выглядеть так: * Активировать определенный тег в GTM когда кто-нибудь отправляет заполненную форму регистрации. * Отправлять данные в какую-нибудь систему аналитики, когда кто-нибудь добавляет товар в корзину. Чтобы исполнить какой-либо код после публикации определенного события - просто добавьте его в DDL Listener, который является частью [Digital Data Manager](https://github.com/driveback/digital-data-manager) и отслеживает все изменения внутри DDL, в том числе и публикацию новых событий. Для того, чтобы добавить новый обработчик событий - используйте массив window.ddListener как показано ниже: [block:code] { "codes": [ { "code": "// Проверка существования ddListener массива\nwindow.ddListener = window.ddListener || [];\n\n// Создание нового listener\nwindow.ddListener.push(['on', 'event', function(event) {\n\n // Проверка соответствия опубликованного event криетриям\n if (event.name === 'Added Product'){\n\n //Отправка данных в систему аналитики\n sendData();\n }\n}]);", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Обогащение и изменение событий" } [/block] Иногда возникает необходимость внести изменение в события, отправленные с сайта до того, как они попадут в обработчик. Например, при помощи следующего кода можно добавить дополнительное поле ко всем событиям: [block:code] { "codes": [ { "code": "window.ddListener.push(['on', 'beforeEvent', function(event) {\n\tevent.userId = window.digitalData.user.userId;\n}]);", "language": "javascript" } ] } [/block] ## Пример 1: [block:code] { "codes": [ { "code": "window.ddListener.push(['on', 'event', function(event) {\n if (event.name === 'Entered Birth Date') {\n \tconsole.log(event.birthDate);\n }\n}]);\n\nwindow.digitalData.events.push({\n\t'name': 'Entered Birth Date',\n 'birthDate': {\n \t'day': '23',\n 'month': '10',\n 'year': '1986'\n }\n});", "language": "javascript" } ] } [/block] ## Пример 2: [block:code] { "codes": [ { "code": "window.ddListener.push(['on', 'beforeEvent', function(event) {\n if (event.name === 'Entered Birth Date') {\n var birthDate = event.birthDate;\n \tevent.birthDate = [birthDate.year, birthDate.month, birthDate.day].join('-');\n }\n}]);\n\nwindow.ddListener.push(['on', 'event', function(event) {\n if (event.name === 'Entered Birth Date') {\n \tconsole.log(event.birthDate);\n }\n}]);\n\nwindow.digitalData.events.push({\n\t'name': 'Entered Birth Date',\n 'birthDate': {\n \t'day': '23',\n 'month': '10',\n 'year': '1986'\n }\n});", "language": "javascript" } ] } [/block] Результат: [block:code] { "codes": [ { "code": "# 1986-10-23", "language": "text" } ] } [/block]