ご利用マニュアル

3-A2. アイコン位置の微調整

更新日 2021年10月14日

同意管理プロのアイコン位置を微調整する方法について説明します。

同意管理プロ ウィジェットでは「あなたのプライバシー」や「歯車マーク」のアイコンが表示されます。もし画面上の要素や他のウィジェットと重なってしまう場合は、位置を微調整することができます。調整方法は、同意管理プロのタグに下記の属性を設定します。

属性名 値の説明
data-vertical-position "top"または"bottom"を指定して基準を決めます。
data-desktop-horizon-value 基準からの横方向位置を"50px"のように指定します。(デスクトップ表示の時)
data-desktop-vertical-value 基準からの縦方向位置を"50px"のように指定します。(デスクトップ表示の時)
data-horizon-value 基準からの横方向位置を"50px"のように指定します。(モバイル表示の時)
data-vertical-value 基準からの縦方向位置を"50px"のように指定します。(モバイル表示の時)

設定例

<script id="__datasign_consent_manager__" src="//cmp.datasign.co/※※※※※※※※※※/cmp.js"
data-vertical-position="bottom"
data-desktop-horizon-value="10px"
data-desktop-vertical-value="100px"
data-horizon-value="10px"
data-vertical-value="50px"
async></script>

GTM経由で配信する場合

※ GTM経由での配信は推奨しておりません。他の通信が、同意管理プロウィジェットの通信ブロックより先に行われるためです。

以下の設定例の様にGTMにて記載することで微調整が可能になります。

設定例

<script>
  var script = document.createElement('script');
  script.id = '__datasign_consent_manager__'
  script.src = "https://cmp.datasign.co/※※※※※※※※※※/cmp.js"
  script.async = true

  // data-vertical-position の設定方法
  script.dataset.verticalPosition = 'bottom'

  // data-vertical-value の設定方法
  script.dataset.verticalValue = '100px'

  // data-desktop-vertical-value の設定方法
  script.dataset.desktopVerticalValue = '400px'

  // data-horizon-value の設定方法
  script.dataset.horizonValue = '100px'

  // data-desktop-horizon-value の設定方法
  script.dataset.desktopHorizonValue = '400px'

  var head = document.getElementsByTagName('head')[0]
  head.insertBefore(script, head.firstChild)
</script>

あなたのサイトに合わせて個別に最適なお見積もりが可能です。

詳細はお問い合わせください

あなたのサイトに合わせて個別に最適なお見積もりが可能です。

お問い合せ