{"_id":"57d698414340330e00953ca2","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"},"__v":0,"parentDoc":null,"category":{"_id":"57d698404340330e00953c71","version":"57d698404340330e00953c6c","__v":0,"project":"564f643f33082f0d001bb714","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-09-02T13:07:47.761Z","from_sync":false,"order":4,"slug":"настройка-событий-в-gtm","title":"Настройка DDM через GTM"},"project":"564f643f33082f0d001bb714","user":"564f641651f2ec0d001d6998","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-07T14:55:55.633Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Разметка страницы\"\n}\n[/block]\nДля правильного отслеживания кликов по товаров необходимо реализовать дополнительную разметку страницы.\n\nНа всех ссылках перехода на карточку товара необходимо добавить:\n1. класс \"**ddl_product_link**\" (для стандартных ссылок) или класс \"**ddl_product_link_js**\" для быстрого просмотра или перехода при помощи ajax (без перезагрузки страницы);\n2. атрибут **data-product-id** со значением ID товара, соответствующем значению в digitalData.listing.items[n].id или digitalData.recommendation[i].items[n].id.\n3. атрибут **data-list-id** со значением ID списка соответствующем значению в digitalData.listing.listId или digitalData.recommendation[i].listId.\n\nПример для стандартных ссылок:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a class=\\\"ddl_product_link\\\" data-product-id=\\\"156944\\\" data-list-id=\\\"related-products\\\">\\n  ...\\n</a>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nПример для ajax-ссылок:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a class=\\\"ddl_product_link_js\\\" data-product-id=\\\"156944\\\" data-list-id=\\\"related-products\\\">\\n  ...\\n</a>  \",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Настройка триггеров в GTM\"\n}\n[/block]\nТриггер для простых ссылок:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/3cd118f-Google_Tag_Manager_2016-09-07_18-41-11.png\",\n        \"Google Tag Manager 2016-09-07 18-41-11.png\",\n        1193,\n        760,\n        \"#ebebe8\"\n      ]\n    }\n  ]\n}\n[/block]\nТриггер для ajax-ссылок (или ссылок быстрого просмотра):\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/760497a-Google_Tag_Manager_2016-09-07_18-46-57.png\",\n        \"Google Tag Manager 2016-09-07 18-46-57.png\",\n        1197,\n        509,\n        \"#e8e8e8\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Настройка тега в GTM\"\n}\n[/block]\nКод тега:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\">\\nvar clickedEl = jQuery({{Click Element}});  \\nvar productId = clickedEl.data('ddl-product-id');\\nvar listId = clickedEl.data('ddl-list-id');\\nif (productId) {\\n  digitalData.events.push({\\n    'name': 'Clicked Product',\\n    'listItem': {\\n      'product': productId,\\n      'listId': listId\\n    }\\n  }); \\n}\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Важно!\",\n  \"body\": \"Подразумевается, что стандарт DigitalData полностью установлен на сайт. Таким образом событие будет автоматически [обогащено данными](https://digitaldata.readme.io/docs/обогащение-данными#-----) о товаре из объекта window.digitalData.\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/7181fa9-Google_Tag_Manager_2016-09-07_19-20-52.png\",\n        \"Google Tag Manager 2016-09-07 19-20-52.png\",\n        1185,\n        814,\n        \"#efeeee\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"В случае, если на сайте есть возможность как перейти на карточку товара, так и вызвать ajax-окно быстрого просмотра, то в теге указываются оба триггера.\"\n}\n[/block]","excerpt":"","slug":"отслеживание-кликов-по-товарам","type":"basic","title":"Тег клика по товару"}

Тег клика по товару


[block:api-header] { "type": "basic", "title": "Разметка страницы" } [/block] Для правильного отслеживания кликов по товаров необходимо реализовать дополнительную разметку страницы. На всех ссылках перехода на карточку товара необходимо добавить: 1. класс "**ddl_product_link**" (для стандартных ссылок) или класс "**ddl_product_link_js**" для быстрого просмотра или перехода при помощи ajax (без перезагрузки страницы); 2. атрибут **data-product-id** со значением ID товара, соответствующем значению в digitalData.listing.items[n].id или digitalData.recommendation[i].items[n].id. 3. атрибут **data-list-id** со значением ID списка соответствующем значению в digitalData.listing.listId или digitalData.recommendation[i].listId. Пример для стандартных ссылок: [block:code] { "codes": [ { "code": "<a class=\"ddl_product_link\" data-product-id=\"156944\" data-list-id=\"related-products\">\n ...\n</a>", "language": "html" } ] } [/block] Пример для ajax-ссылок: [block:code] { "codes": [ { "code": "<a class=\"ddl_product_link_js\" data-product-id=\"156944\" data-list-id=\"related-products\">\n ...\n</a> ", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Настройка триггеров в GTM" } [/block] Триггер для простых ссылок: [block:image] { "images": [ { "image": [ "https://files.readme.io/3cd118f-Google_Tag_Manager_2016-09-07_18-41-11.png", "Google Tag Manager 2016-09-07 18-41-11.png", 1193, 760, "#ebebe8" ] } ] } [/block] Триггер для ajax-ссылок (или ссылок быстрого просмотра): [block:image] { "images": [ { "image": [ "https://files.readme.io/760497a-Google_Tag_Manager_2016-09-07_18-46-57.png", "Google Tag Manager 2016-09-07 18-46-57.png", 1197, 509, "#e8e8e8" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Настройка тега в GTM" } [/block] Код тега: [block:code] { "codes": [ { "code": "<script type=\"text/javascript\">\nvar clickedEl = jQuery({{Click Element}}); \nvar productId = clickedEl.data('ddl-product-id');\nvar listId = clickedEl.data('ddl-list-id');\nif (productId) {\n digitalData.events.push({\n 'name': 'Clicked Product',\n 'listItem': {\n 'product': productId,\n 'listId': listId\n }\n }); \n}\n</script>", "language": "html" } ] } [/block] [block:callout] { "type": "warning", "title": "Важно!", "body": "Подразумевается, что стандарт DigitalData полностью установлен на сайт. Таким образом событие будет автоматически [обогащено данными](https://digitaldata.readme.io/docs/обогащение-данными#-----) о товаре из объекта window.digitalData." } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/7181fa9-Google_Tag_Manager_2016-09-07_19-20-52.png", "Google Tag Manager 2016-09-07 19-20-52.png", 1185, 814, "#efeeee" ] } ] } [/block] [block:callout] { "type": "info", "body": "В случае, если на сайте есть возможность как перейти на карточку товара, так и вызвать ajax-окно быстрого просмотра, то в теге указываются оба триггера." } [/block]