ブログ

HOME
ブログ
WPサイト内の全ての電話番号にGAイベントトラッキングを自動挿入する方法

2020年4月2日 / 最終更新日 : 2021年10月12日 nasubi ブログ

WPサイト内の全ての電話番号にGAイベントトラッキングを自動挿入する方法

Webサイト内の電話番号がタップ（場合によってはクリック）された場合、それらを計測したい時は、Googleアナリティクスのイベントトラッキングを設定するのが定石です。

しかし、サイト内に複数の電話番号が存在し、かつ、複数のページにまたがっている場合、それら１つ１つにイベントトラッキングを設定するのは流石に骨が折れますよね？

てことで、サイト内に存在するすべての電話番号リンクに、イベントトラッキングタグを自動挿入する為のコードを作成しました（WordPressで作成されたサイトで動作します）。

以下コードをfunction.php内の任意の箇所にコピペするだけで、イベントラベルをリンク先の電話番号に設定して自動挿入します。

function wp_loaded_tellink() {
    ob_start('tellink_onclick');
}

function tellink_onclick($html) {
	// 【<a href="tel:******" ***>】を取り出す配列【$checkArray[0]】
	$target_tellink = '/<a.*?(href\s*?=\s*?\"\s*?(tel:.*?)\").*?>/';
	preg_match_all($target_tellink,$html,$checkArray);
	$anchorArray = $checkArray[0];
	$hrefArray = $checkArray[1];
	$telArray = $checkArray[2];

	// hrefの中身両端にスペースがあれば削除
	foreach( $telArray as &$telvalue ) {
		$telvalue = trim($telvalue);
	}
	unset($telvalue);
	
	// 値に【onclick = "】が存在し、その中に【ga (】が存在し、その中に【send】か【event】が存在する
	$check1 = '/onclick\s*?=.*?ga\s*?\(.*?[(send)(event)].*?/';
	// 値に【onclick = "】が存在する
	$check2 = '/onclick\s*?=.*?\"/';

	$resultArray = array();
	foreach ( $anchorArray as $akey => $avalue ) {
		//置換対象【href="tel:***"】
		$repracestr = $hrefArray[$akey];
		//置換後文字列
		$outputstr = "href=\"".$telArray[$akey]."\" onclick=\"ga('send','event','tel','tap',('".$telArray[$akey]."');\"";

		if (preg_match($check1,$avalue)) {
			// なにもしない
		} elseif (preg_match($check2,$avalue)) {
			preg_match('/onclick\s*?=\s*?\"(.*?)\"/',$avalue,$avalue2);
			//元々あったonclickを一旦削除
			$html = str_replace($avalue2[0],"",$html);
			//置換後文字列
			$outputstr = "href=\"".$telArray[$akey]."\" onclick=\"ga('send','event','tel','tap',('".$telArray[$akey]."');".$avalue2[1]."\"";
			$resultArray += array( $repracestr => $outputstr );
		} else {
			$resultArray += array( $repracestr => $outputstr );
		}
	}
	$data1 = array_keys($resultArray);
	$data2 = array_values($resultArray);
	$html = str_replace($data1,$data2,$html);
	return $html;
}
add_action('wp_loaded' , 'wp_loaded_tellink' , 99);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

function wp_loaded_tellink() {

ob_start('tellink_onclick');

}

function tellink_onclick($html) {

// 【<a href="tel:******" ***>】を取り出す配列【$checkArray[0]】

$target_tellink = '/<a.*?(href\s*?=\s*?\"\s*?(tel:.*?)\").*?>/';

preg_match_all($target_tellink,$html,$checkArray);

$anchorArray = $checkArray[0];

$hrefArray = $checkArray[1];

$telArray = $checkArray[2];

// hrefの中身両端にスペースがあれば削除

foreach( $telArray as &$telvalue ) {

$telvalue = trim($telvalue);

}

unset($telvalue);

// 値に【onclick = "】が存在し、その中に【ga (】が存在し、その中に【send】か【event】が存在する

$check1 = '/onclick\s*?=.*?ga\s*?\(.*?[(send)(event)].*?/';

// 値に【onclick = "】が存在する

$check2 = '/onclick\s*?=.*?\"/';

$resultArray = array();

foreach ( $anchorArray as $akey => $avalue ) {

//置換対象【href="tel:***"】

$repracestr = $hrefArray[$akey];

//置換後文字列

$outputstr = "href=\"".$telArray[$akey]."\" onclick=\"ga('send','event','tel','tap',('".$telArray[$akey]."');\"";

if (preg_match($check1,$avalue)) {

// なにもしない

} elseif (preg_match($check2,$avalue)) {

preg_match('/onclick\s*?=\s*?\"(.*?)\"/',$avalue,$avalue2);

//元々あったonclickを一旦削除

$html = str_replace($avalue2[0],"",$html);

//置換後文字列

$outputstr = "href=\"".$telArray[$akey]."\" onclick=\"ga('send','event','tel','tap',('".$telArray[$akey]."');".$avalue2[1]."\"";

$resultArray += array( $repracestr => $outputstr );

} else {

$resultArray += array( $repracestr => $outputstr );

}

$data1 = array_keys($resultArray);

$data2 = array_values($resultArray);

$html = str_replace($data1,$data2,$html);

return $html;

}

add_action('wp_loaded' , 'wp_loaded_tellink' , 99);

ぜひ、ご活用ください∠( ˙-˙ )／

カテゴリー: ブログ