gatsby の head 部に、GTM の dataLayer 変数を埋め込むため、react-helmet の head 部に素の JavaScript を記述しようと調べた結果を記載します。

実装方法

実装方法は、nfl/react-helmet: A document head manager for React の README.md に記載がありました。以下のように{``} で script 記述 を囲むことで実現できます。

    {/* inline script elements */}
    <script type="application/ld+json">{`
        {
            "@context": "http://schema.org"
        }
    `}</script>

GTM の dataLayer 変数は以下のように記述しました。

    {/* dataLayer */}
    <script>{`
        var userTypes = ['A','B','C'];
        var userType = userTypes[Math.floor(Math.random() * userTypes.length)];
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({'userType': userType});
    `}</script>

後は、条件で出し分けをしたかったのですが、実装方法がわからずそちらはあきらめました。
以上です。

コメント

カテゴリー

最近の投稿