Интеграция не сложна в принципе, т.к. Usercentrics CMP ставит задачу упростить сбор разрешений пользователя и управление скриптами на основе данных разрешений.
Первым шагом интеграции является подключение скриптов CMP в заголовок (head) страницы до каких либо других скриптов. Кроме этого, рекомендуется сформировать набор preload/preconnect тегов. Заголовки должны в итоге выглядеть так:
|
1 2 3 4 5 6 7 |
<link rel="preconnect" href="//app.usercentrics.eu"></link> <link rel="preconnect" href="//api.usercentrics.eu"></link> <link rel="preconnect" href="//privacy-proxy.usercentrics.eu"></link> <link rel="preload" href="//app.usercentrics.eu/browser-ui/latest/loader.js" as="script"></link> <link rel="preload" href="//privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js" as="script"></link> <script data-settings-id="XXXXXXXXX" src="https://app.usercentrics.eu/browser-ui/latest/loader.js" id="usercentrics-cmp" data-tcf-enabled="data-tcf-enabled"></script> <script src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js" type="application/javascript"></script> |
Где XXXXXXXXX — код (id) конфигурации в UserCentrics.
Для Drupal 7 эти теги можно сформировать следующим кодом через хук hook_html_head_alter.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
/** * Implements hook_html_head_alter(). */ function MYMODULE_html_head_alter(&$head_elements) { if (!path_is_admin(current_path())) { $cmpID = 'XXXXXXXXX'; if ($cmpID) { $head_elements = [ 'usercentrics-APP-preconnect' => [ '#type' => 'html_tag', '#tag' => 'link', '#value' => '', '#attributes' => ['rel' => 'preconnect', 'href' => '//app.usercentrics.eu'], '#weight' => -1012, ], 'usercentrics-API-preconnect' => [ '#type' => 'html_tag', '#tag' => 'link', '#value' => '', '#attributes' => ['rel' => 'preconnect', 'href' => '//api.usercentrics.eu'], '#weight' => -1011, ], 'usercentrics-CMP-preconnect' => [ '#type' => 'html_tag', '#tag' => 'link', '#value' => '', '#attributes' => ['rel' => 'preconnect', 'href' => '//privacy-proxy.usercentrics.eu'], '#weight' => -1010, ], 'usercentrics-CMP-preload' => [ '#type' => 'html_tag', '#tag' => 'link', '#value' => '', '#attributes' => ['rel' => 'preload', 'href' => '//app.usercentrics.eu/browser-ui/latest/loader.js', 'as' => 'script'], '#weight' => -1009, ], 'usercentrics-CMP-bundle-preload' => [ '#type' => 'html_tag', '#tag' => 'link', '#value' => '', '#attributes' => ['rel' => 'preload', 'href' => '//privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js', 'as' => 'script'], '#weight' => -1008, ], 'usercentrics-CMP-loader' => [ '#type' => 'html_tag', '#tag' => 'script', '#value' => '', '#attributes' => [ 'data-settings-id' => $cmpID, 'src' => 'https://app.usercentrics.eu/browser-ui/latest/loader.js', 'id' => 'usercentrics-cmp', 'data-tcf-enabled' => 'data-tcf-enabled', ], '#weight' => -1007, ], 'usercentrics-CMP-bundle' => [ '#type' => 'html_tag', '#tag' => 'script', '#value' => '', '#attributes' => [ 'src' => 'https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js', 'type' => 'application/javascript', ], '#weight' => -1006, ] ] + $head_elements; } } } |
Вес элементов заголовка выбран так, чтобы вставить данные заголовки до прочих скриптов.
В Drupal 8/9 используется другой хук — page_attachments_alter, приведу код с минимальным необходимым набором тегов, чтобы не повторяться:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/** * @attachments * Attach Quicksand google font */ function MYMODULE_page_attachments_alter(array &$attachments) { $id = 'XXXXXXXXX'; if ($id) { $attachments['#attached']['html_head'][] = [ ['#tag' => 'link', '#attributes' => [ 'rel' => 'preconnect', 'href' => '//privacy-proxy.usercentrics.eu'], '#weight' => -2000 ], 'usercentrics.proxy', ]; $attachments['#attached']['html_head'][] = [ ['#tag' => 'link', '#attributes' => [ 'rel' => 'preload', 'href' => '//privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js', 'as' => 'script'], '#weight' => -2000 ], 'usercentrics.bundle', ]; $attachments['#attached']['html_head'][] = [ ['#tag' => 'script', '#attributes' => [ 'data-settings-id' => $id, 'src' => 'https://app.usercentrics.eu/browser-ui/latest/bundle.js', 'id' => 'usercentrics-cmp', 'defer' => 'defer'], '#weight' => -2000 ], 'usercentrics.script', ]; } } |
В реальных приложениях, вы скорее всего будете читать CMP ID из настроек сайта.
Обычно подключения скриптов Usercentrics достаточно для большей части сайтов чтобы контролировать cookies и скрипты.
В практике я сталкивался с инжекцией скриптов через GTM, которые не вылавливались CMP, т.к. необходимо было следовать рекомендациям usercentrics. Это требует следующих небольших изменений:
- Изменить тип скрипта на type=»text/plain»,
- добавить атрибут data-usercentrics=»Name Data Processing Service» с указанием имени сервиса, как он указан в настройках usercentrics.