【GTM】GAで定義したカスタムディメンションを取得する

GTM（Google Tag Manger）で、GA（Google Analytics）で定義したカスタムディメンションを取得したい

手順はこのドキュメントにあった

support.google.com

この中で、「データレイヤーからカスタム ディメンション値を設定する」を行う

データレイヤーに描画時やクリック時に値を設定することで、その値をGTMに送信することができる

例えば以下

<button onclick="dataLayer.push({'destinationName': 'paris'});">
  パリ旅行を今すぐ予約！
</button>

ドキュメントのステップ1は既にこちらの記事で定義できているので、ステップ 2から行う

uga-box.hatenablog.com

アプリ側では初期描画時にABどちらかに振り分けられた値をGTMに連携したいので、描画時にデータレイヤーに値を設定する

        <script
          dangerouslySetInnerHTML={{
            __html: `
            var dataLayer = dataLayer || [];
            dataLayer.push({'destination': 'A'});

            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXX');
          `,
          }}
        />

ここのキー名はGTM側で設定した変数名
※「4. [データレイヤーの変数名] 欄に「destination」と入力します。」のところ

dataLayer.push({'destination': 'A'});

GTM側と揃っていれば変数名はなんでもよい