2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

カスタムjavascriptでPage pathからIDを切り取る

Last updated at Posted at 2019-04-24

Google Tag Manager(以下GTM)の変数をカスタムJavascriptを使って自分で作るの巻。
今回やりたいことは、URLからIDを切り取ってGTMの変数にすること。

例)https://example.com/articles/1234
上記URLの「1234」という記事IDを変数にする方法です。

1.組み込み変数

GTMには組み込み変数が用意されていて、たいていのものはカバーできます。
Click Element、Click Classes、Click ID、Page Path、Page URL・・・etc
このあたりは扱いやすくよく利用する変数です。

これらの変数を使って、カスタムJavascriptでオリジナル変数を作っちゃおうが主題。
非エンジニアが書いていますので、優しく、温かく見守ってください♪
WEBエンジニアならスラスラ書けるんでしょうけど、GTMを利用しているWEB運営者でどれだけの人が書けるか...
ぐぐっても出てこないから社内備忘録を兼ねて記事にしました。

2.カスタムJavascript

GTM → 変数 → ユーザー定義変数の「新規」 → 変数の設定 → カスタムJavascript
と進むと、下記の画面になり、自由にコードの記述が可能です。
783ad4d72a0dd5304bb747bec3022681.png

ここに下記のコードを書きます。

カスタムJavascript
function(){
 var nowPath = {{Page Path}};
 var lastSlashPos = nowPath.lastIndexOf('/');
 return nowPath.substring(lastSlashPos + 1); 
}

以下コードの説明。
例)https://example.com/articles/1234

二行目の{{Page Path}}はGTMの組み込み変数です。これを改造していきます。
例の場合はPage Pathは/articles/1234です。

三行目は二行目で定義したnowPathの最後の/の順番を定義しています。
例の場合は、文字列の10番目になるので10です。

四行目は二行目で定義したnowPathを三行目で計測した数値+1以降の文字列を切り取っています。
例の場合は、/articles/1234の11番目以降の文字列を切り取っています。

これをarticleIDと命名してあげればカスタム変数の完成。

2
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?