Google タグマネージャーのコードを設置するとリンクを編集できない

編集モードで記事ブロック内のリンクをクリックすると、リンク先へ遷移してしまい編集ができないという問題を生じています。
Google タグマネージャーを導入した際に設置したコード 2 点のうち「このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。」とある方を削除すると、通常通り編集できるようになります。

設置方法は以下の 2 通りを試行しました。

  1. [管理画面]-[システムと設定]-[SEOと統計]-[トラッキングコード]で挿入
  2. テーマの elements/header.php で挿入

2 では挿入位置の変更なども試してみましたが、いずれの方法でも改善できずにおります。
同じような問題を生じ解決できたという方はいらっしゃいますでしょうか。

Concrete CMS バージョン
9.0.2

PHP バージョン
7.4.x

サーバー
エックスサーバー

1 Like

Maybe this will help @Jun_22 Where to add google site tag? - #4 by cedrey

1 Like

To ensure no risk of interference with edit mode, I add at the start of any 3rd party script function:

function 3rd_party_fn(){
  if(CCM_EDIT_MODE){
    return;
  }
  // rest of 3rd party fn
}
1 Like

@Jun_22 さん

おそらく、Google Tag Manager の中にあるコードが、Concrete CMS の編集機能の Javascript と競合している様ですね。

編集できないという症状は次のうちどちらでしょうか?

    1. 編集モードボタンを押してモードに入った時にブロックの編集・挿入・移動などができない
    1. ログイン直後・上部の編集ツールバーの表示もできない・編集モードにすら入ることができない

具体的にどのようなコードを入れているのでしょうか?

A/B テストをするようなコードが入っていたり、
具体的には Concrete でも使っている JQuery ライブラリを使った表示をしていて、JQuery ライブラリを二重に読み込んでしまっている

といったようなことが考えられます。

とにかく、
編集モード時に編集だけができないのであれば、
JohnTheFish さんがアドバイスされた様に、
編集モード時は Google Tag Manager のコードをいれないように PHP を組んだり、

ツールバー自体も表示できないのであれば「ツールバーが表示されている場合は Google Tag を入れない」というコードに変えることも可能です。

編集モード時の判定

<?php
if (!$c->isEditMode()) { ?>
// ここにGoogle Tag Manager のコードをいれる
<?php } ?>

編集ツールバーが出ている時は表示しない

<?php
$cp = new Permissions($c);
if (!$cp->canViewToolbar()) { ?>
// ここにGoogle Tag Manager のコードをいれる
<?php } ?>

参考

ページを編集モードにして記事ブロックを編集可能な状態にするところまでは問題ございません。
記事ブロックで挿入したリンクを編集する場合、以下のような手順になるかと思いますが

  1. 編集したいリンクテキストにカーソルを置く
  2. [リンク挿入 / 編集] ボタン(鎖のアイコン)をクリックする
  3. 表示されたダイアログボックスでリンクを編集する

手順 1 でリンクテキストをクリックするとリンク先のページへ遷移してしまい、ダイアログボックスを開けないという状況です。
クリックではなくキーボードの矢印キーでカーソルを置けば問題は生じませんが、編集作業者には不便と思います。

ご案内いただいた方法で編集モード時は Google タグマネージャーのコードを出力しないよう変更すると、問題は解消されました。
PHP で処理を追加しましたが、編集モードの状態は JavaScript の CCM_EDIT_MODE でも判定できるのですね。

タグマネージャーの機能への影響については、しばらく様子を見たいと思います。
皆様ご助力ありがとうございました。

1 Like

@Jun_22 一旦は、編集モードの際に GTM のコードを吐き出さない様にしたとのこと、了解です。

ちなみに、私のプロジェクトでも GTM を使用しているプロジェクトはありますが、
編集モードに影響をする様なことは起こっていないので、GTM の中で実装している何かが悪影響していると思います。

編集モードの状態は JavaScript の CCM_EDIT_MODE でも判定できるのですね。

はい。そうですね。

ただ、どの Javascript が競合しているかで、CCM_EDIT_MODE を使ってはできないかもしれません。