【elm-pages(elm-ui)】Google Tag Managerを設置する方法
2021年11月06日(土)


Google Tag Managerのガイドに従ってindex.jsにペーストする

(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','任意のタグ');


なんかこんな感じの関数を作って

googleTagManager : String -> Element msg
googleTagManager id =
    html <|
        Html.node "noscript"
            []
            [ Html.iframe
                [ Attr.src <| "https://www.googletagmanager.com/ns.html?id=" ++ id
                , Attr.height 0
                , Attr.width 0
                , Attr.style "display" "none"
                , Attr.style "visibility" "hidden"
                ]
                []
            ]


Shared.elmのViewに設置すればOK

view :
    Data
    ->
        { path : Path
        , route : Maybe Route
        }
    -> Model
    -> (Msg -> msg)
    -> View msg
    -> { body : Html msg, title : String }
view sharedData page model toMsg pageView =
    { body =
        layout [] <| column [] [ googleTagManager "任意のID"]
    , title = pageView.title
    }


©2021 yowanai.com