WebflowでGoogleタグマネージャー(GTM)をインストールして設定する方法

サイトの種類に関係なく、企業サイト、eコマースサイト、情報ブログ、または小規模なビジネスであっても、人々があなたのウェブサイトを訪れる方法、どのくらいの時間滞在するか、どのページを訪れるかを理解することが重要です。おそらく、Googleアナリティクスを使用して有意義な洞察を提供したり、Googleウェブサイト最適化ツールを使用して訪問者や売上を増やすためにサイトを最適化したりしているのでしょう。おそらく、最終的には、コンバージョン、トラフィック、その他の分析データを追跡するために複数のコードスニペットを追加することになります。

Googleタグマネージャーを使用すると、これらすべてのスクリプトを単一のダッシュボードから簡単に追加および管理できます。Googleアナリティクス、Adwords、Crazy Egg、Hotjar、LinkedIn Insightなどのために組み込みのタグテンプレートがあります。タグマネージャーは、複数のサードパーティの分析および追跡プラットフォームとも連携します。

この記事では、Googleタグマネージャーを使用してWebflowにGoogleアナリティクスを追加する方法を示します。

アナリティクスアカウントの作成またはサインイン：

ステップ 1：google.com/analyticsに移動します。

ステップ 2：次のいずれかを行います：

• アカウントを作成するには、無料で始めるをクリックします。

• アカウントにサインインするには、アナリティクスにサインインをクリックします。

詳細については、Googleサポートを参照してください。

Googleタグマネージャーの設定

ステップ 1：tagmanager.google.comに移動し、Googleアナリティクスで使用したのと同じGoogleアカウントを使用してサインアップします。

ステップ 2：ログイン後、アカウントを作成リンクをクリックしてアカウント名とコンテナ情報を提供し、作成ボタンをクリックします。

ステップ 3：新しいアカウントが作成されると、以下のような追跡コードが表示されます。

ステップ 4：最初の追跡コードをコピーします。

Webflowにタグマネージャーコードを追加する

ステップ 1：Webflowアカウントにログインしたら、サイトのプロジェクト設定ページに移動し、カスタムコードタブをクリックします。

ステップ 2：追跡コードをヘッドコード領域に貼り付けて、保存ボタンをクリックします。

ステップ 3：デザイナーエディターに移動し、ボディタグの直後にHTML埋め込み要素を挿入します。

ステップ 4：tagmanager.google.comに戻り、追跡コードの第2部をコピーします。

ステップ 5：Webflowで作成したHTML埋め込み要素にコードを貼り付け、保存して閉じるボタンをクリックします。

ステップ 6：ほとんどの場合、すべてのページで訪問者を追跡したいので、このHTML埋め込み要素をシンボルとして保存することは良い習慣です。これにより、将来追跡コードに加えた変更がプロジェクト全体のシンボルのすべてのインスタンスを更新します。

ステップ 7：新しいシンボルを作成をクリックし、シンボルに名前を付けます。

ステップ 8：保存されたら、Command + E（Mac）またはControl + E（Windows）を使用してシンボルを迅速に挿入し、"Google"と入力して追跡コードシンボルを見つけます。

以上で、WebflowサイトにGoogleタグマネージャーを正常にインストールおよび設定しました。