Zenn
Open4

STUDIO x GTM でJavascript使えるようにする設定メモ

IssuyIssuy

背景

  • studioで作ったページにJavascriptを使いたい

    • コピーボタンを押すと対象の文字列がコピーされるようにしたい

  • このドキュメントに記載される内容

    • どんな設定したか
    • 備忘録
IssuyIssuy

設定 for STUDIO

  • GTM(Google Tag Manager)の連携が必要（そのために有料プランが必要

  • GTM のIDを設定

    • 他のSTUDIOプロジェクトに同じGTMプロジェクトのIDを設定すると、スクリプトは1箇所で管理して使い回せます
IssuyIssuy

設定 for GTM

  • GTMのユーザー定義変数に「カスタム JavaScript」を作成

    • copy_text っていうスクリプトを作成
    • スクリプトでは以下のような処理をコーディング
      • 予めSTUDIOのデザインエディタで、コピーボタン、コピー対象のそれぞれのHTMLタグにIDを設定する
      • 検知されたクリック要素のIDとコピーボタンのIDと一致すればコピー処理を実施
      • コピー対象をIDを元に取得してコピー

  • GoogleTagManagerのトリガーを設定

    • click_copy がそれ

  • GoogleTagManagerのタグを設定

    • click_copy_ok がそれ
    • これの必要性よく分からなかったが、とりあえず設定しておいた
    • これが無いと動作しなかった気もする