Category Archives: Google

在網站中加入動態再行銷代碼

https://support.google.com/google-ads/answer/3103357?hl=zh-Hant

使用符合業務類型的自訂參數

https://support.google.com/google-ads/answer/7305793

設定目標對象來源

https://support.google.com/google-ads/answer/7540515?hl=zh-Hant

全域網站代碼

<!-- Global site tag (gtag.js) - AdWords: 0000000 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-0000000"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-0000000');
</script>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'AW-0000000');

</script>

事件程式碼片段

<script>
  gtag('event', 'page_view', {
    'send_to': 'AW-0000000',
    //零售
    'ecomm_pagetype': 'replace with value',//recommended
    'ecomm_prodid': 'replace with value',//required
    'ecomm_totalvalue': 'replace with value',//recommended
    //Hotel
    'hrental_enddate': 'replace with value',
    'hrental_id': 'replace with value',//required
    'hrental_pagetype': 'replace with value',//recommended
    'hrental_startdate': 'replace with value',
    'hrental_totalvalue': 'replace with value',//recommended
    //本地優惠
    'local_id': 'replace with value',//required
    'local_pagetype': 'replace with value',//recommended
    'local_totalvalue': 'replace with value',//recommended
    //旅行
    'travel_destid': 'replace with value',//required
    'travel_enddate': 'replace with value',
    'travel_originid': 'replace with value',
    'travel_pagetype': 'replace with value',//recommended
    'travel_startdate': 'replace with value',
    'travel_totalvalue': 'replace with value',//recommended
    'user_id': 'replace with value'
  });
</script>

gtag('event', 'page_view', {

'send_to': 'AW-0000000',

//零售

'ecomm_pagetype': 'replace with value',//recommended

'ecomm_prodid': 'replace with value',//required

'ecomm_totalvalue': 'replace with value',//recommended

//Hotel

'hrental_enddate': 'replace with value',

'hrental_id': 'replace with value',//required

'hrental_pagetype': 'replace with value',//recommended

'hrental_startdate': 'replace with value',

'hrental_totalvalue': 'replace with value',//recommended

//本地優惠

'local_id': 'replace with value',//required

'local_pagetype': 'replace with value',//recommended

'local_totalvalue': 'replace with value',//recommended

//旅行

'travel_destid': 'replace with value',//required

'travel_enddate': 'replace with value',

'travel_originid': 'replace with value',

'travel_pagetype': 'replace with value',//recommended

'travel_startdate': 'replace with value',

'travel_totalvalue': 'replace with value',//recommended

'user_id': 'replace with value'

});

</script>

Tag Manager and gtag.js

https://support.google.com/tagmanager/answer/7582054?hl=en

Google Ads Related Tags in GTM

https://support.google.com/tagmanager/topic/6334091

自訂變數

活用 Google Analytics 自訂變數的 10 種方法

維度Dimensions & 指標Metrics

5分鐘搞懂Google Analytics的指標、維度

Example to build datalayer for Google Enhanced Ecommerce

<script>
window.dataLayer = window.dataLayer || [];

var products = [];
<?php foreach($order_products as $key => $item): ?>
products.push({
	'name': '<?=$item->name?>',
    'id': '<?=$item->product_id?>',
    'price': '<?=round($item->price, 0)?>',
    'brand': 'WIIB',
    'category': 'Health',
    'quantity': <?=$item->quantity?>,
    'coupon': '' 
});
<?php endforeach; ?>

dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': '<?=$order->transaction_id?>',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'WIIB',
        'revenue': '<?=round($order->amount, 0)?>',                     // Total transaction value (incl. tax and shipping)
        'tax':'<?=$order->amount*0.05?>',
        'shipping': '<?=$order->shipping_fee?>'
      },
      'products': products
    }
  }, 
  'event': 'transactionComplete'
});
</script>

window.dataLayer = window.dataLayer || [];

var products = [];

<?php foreach($order_products as $key => $item): ?>

products.push({

'name': '<?=$item->name?>',

'id': '<?=$item->product_id?>',

'price': '<?=round($item->price, 0)?>',

'brand': 'WIIB',

'category': 'Health',

'quantity': <?=$item->quantity?>,

'coupon': ''

});

<?php endforeach; ?>

dataLayer.push({

'ecommerce': {

'purchase': {

'actionField': {

'id': '<?=$order->transaction_id?>', // Transaction ID. Required for purchases and refunds.

'affiliation': 'WIIB',

'revenue': '<?=round($order->amount, 0)?>', // Total transaction value (incl. tax and shipping)

'tax':'<?=$order->amount*0.05?>',

'shipping': '<?=$order->shipping_fee?>'

'products': products

}

'event': 'transactionComplete'

});

</script>

Reference:

Config Pixel Purchase in Google Tag Manager

Install Pixel base
Add this line to tell Tag Manager this tag is loaded.

JavaScript

window.google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}});

1

window.google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}});
Get ready your advanced ecommerce datalayer of google

Create a variable (Custom javascript) called “Transform Total for Pixel” to transform data from datalayer for pixel purchase event

function(){
	try{
		var products = google_tag_manager[{{Container ID}}].dataLayer.get("ecommerce").purchase.products;
		var productIds = [];
		
		for(i = 0; i < products.length; i++){
			productIds.push(products[i].id);
		}
		
		return productIds;
	}catch(e){
		return 'undefined';
	}
}

function(){

try{

var products = google_tag_manager[{{Container ID}}].dataLayer.get("ecommerce").purchase.products;

var productIds = [];

for(i = 0; i < products.length; i++){

productIds.push(products[i].id);

}

return productIds;

}catch(e){

return 'undefined';

}

Create a new Tag – Purchase (Custom HTML)
Config trigger (Recommended triggered by event instead of page view)

Reference

Google Analytics Ecommerce tracking via Tag Manager

<?php
// Transaction Data
$trans = array('id'=>'1234', 'affiliation'=>'Acme Clothing',
               'revenue'=>'11.99', 'shipping'=>'5', 'tax'=>'1.29');

// List of Items Purchased.
$items = array(
  array('sku'=>'SDFSDF', 'name'=>'Shoes', 'category'=>'Footwear', 'price'=>'100', 'quantity'=>'1'),
  array('sku'=>'123DSW', 'name'=>'Sandals', 'category'=>'Footwear', 'price'=>'87', 'quantity'=>'1'),
  array('sku'=>'UHDF93', 'name'=>'Socks', 'category'=>'Footwear', 'price'=>'5.99', 'quantity'=>'2')
);
?>

<?php

// Transaction Data

$trans = array('id'=>'1234', 'affiliation'=>'Acme Clothing',

'revenue'=>'11.99', 'shipping'=>'5', 'tax'=>'1.29');

// List of Items Purchased.

$items = array(

array('sku'=>'SDFSDF', 'name'=>'Shoes', 'category'=>'Footwear', 'price'=>'100', 'quantity'=>'1'),

array('sku'=>'123DSW', 'name'=>'Sandals', 'category'=>'Footwear', 'price'=>'87', 'quantity'=>'1'),

array('sku'=>'UHDF93', 'name'=>'Socks', 'category'=>'Footwear', 'price'=>'5.99', 'quantity'=>'2')

);

<?php
// Function to return the JavaScript representation of a TransactionData object.
function getTransactionJs(&$trans) {
  return <<<HTML
ga('ecommerce:addTransaction', {
  'id': '{$trans['id']}',
  'affiliation': '{$trans['affiliation']}',
  'revenue': '{$trans['revenue']}',
  'shipping': '{$trans['shipping']}',
  'tax': '{$trans['tax']}'
});
HTML;
}

// Function to return the JavaScript representation of an ItemData object.
function getItemJs(&$transId, &$item) {
  return <<<HTML
ga('ecommerce:addItem', {
  'id': '$transId',
  'name': '{$item['name']}',
  'sku': '{$item['sku']}',
  'category': '{$item['category']}',
  'price': '{$item['price']}',
  'quantity': '{$item['quantity']}'
});
HTML;
}
?>

<?php

// Function to return the JavaScript representation of a TransactionData object.

function getTransactionJs(&$trans) {

return <<<HTML

ga('ecommerce:addTransaction', {

'id': '{$trans['id']}',

'affiliation': '{$trans['affiliation']}',

'revenue': '{$trans['revenue']}',

'shipping': '{$trans['shipping']}',

'tax': '{$trans['tax']}'

});

HTML;

}

// Function to return the JavaScript representation of an ItemData object.

function getItemJs(&$transId, &$item) {

return <<<HTML

ga('ecommerce:addItem', {

'id': '$transId',

'name': '{$item['name']}',

'sku': '{$item['sku']}',

'category': '{$item['category']}',

'price': '{$item['price']}',

'quantity': '{$item['quantity']}'

});

HTML;

}

<!-- Begin HTML -->
<script>
ga('require', 'ecommerce');

<?php
echo getTransactionJs($trans);

foreach ($items as &$item) {
  echo getItemJs($trans['id'], $item);
}
?>

ga('ecommerce:send');
</script>

ga('require', 'ecommerce');

<?php

echo getTransactionJs($trans);

foreach ($items as &$item) {

echo getItemJs($trans['id'], $item);

}

ga('ecommerce:send');

</script>

Enhanced ecommerce tracking with tag manager

Reference:

Tag Manager for enhanced-ecommerce
https://developers.google.com/tag-manager/enhanced-ecommerce#overview
e-commerce tips for tag manager
https://www.simoahava.com/analytics/ecommerce-tips-google-tag-manager/
Google Analytics for ecommerce:
https://developers.google.com/analytics/devguides/collection/analyticsjs/ecommerce
Unlock the Data Layer: A Non-Developer’s Guide to Google Tag Manager
https://www.lunametrics.com/blog/2013/10/15/unlock-data-layer-google-tag-manager/
Implementing E-commerce tracking via tag manager:
https://www.optimizesmart.com/implementing-e-commerce-tracking-google-tag-manager/

Tag Manager + Pixel

Install Google Tag Manager in web

Create Tag for Pixel base code

Create Tags for Pixel built-in events

<script>
fbq('track', 'AddToCart', {
content_ids: {{Product SKU Array}},
content_type: 'product',
content_name: {{Product Page - Product Name}},
value: {{Product Page - Product Price}},
currency: 'TWD'
});
</script>

fbq('track', 'AddToCart', {

content_ids: {{Product SKU Array}},

content_type: 'product',

content_name: {{Product Page - Product Name}},

value: {{Product Page - Product Price}},

currency: 'TWD'

});

</script>

<script>
fbq('track', 'InitiateCheckout', {
content_ids: {{Product SKU Array}},
content_type: 'product',
content_name: {{Product Page - Product Name}},
value: {{Product Page - Product Price}},
currency: 'TWD',
num_items: {{Product Item Number}}
});
</script>

fbq('track', 'InitiateCheckout', {

content_ids: {{Product SKU Array}},

content_type: 'product',

content_name: {{Product Page - Product Name}},

value: {{Product Page - Product Price}},

currency: 'TWD',

num_items: {{Product Item Number}}

});

</script>

Product Catalog for Pixel

Google Product Category and Product Type

Reference:

G Suite 使用說明

https://admin.google.com

管理網域:

控制台首頁 -> 下方”更多控制項”

低安全性應用程式帳戶存取設定(Allow less secure apps)

預設是禁止所有成員自行改變設定，因此成員登入自己的google帳戶，會看不到這個選項

控制台 -> 安全性 -> 基本設定 -> 開啟「低安全性應用程式」設定 ››

Reference:

APP應用程式密碼:

密須開啟兩階段認證後才可以取得

http://open.mymy.tw/index-traitshow.html?id=109

驗證網域:

https://support.google.com/a/answer/60216?hl=zh-Hant

DNS中的MX設定:

https://support.google.com/a/answer/174125?hl=zh-Hant

SMTP:

https://support.google.com/mail/answer/7126229?visit_id=1-636264511803609300-627858639&hl=zh-Hant&rd=1
https://ec.softking.com.tw/use/use.asp?id=331
Godaddy block all SMTP related request:
https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting

PHP

$mail->isSMTP(); $mail->Host = 'relay-hosting.secureserver.net'; $mail->Port = 25; $mail->SMTPAuth = false; $mail->SMTPSecure = false;

1
2
3
4
5

$mail->isSMTP();
$mail->Host = 'relay-hosting.secureserver.net';
$mail->Port = 25;
$mail->SMTPAuth = false;
$mail->SMTPSecure = false;

用上面這個方式可以順利用SMTP寄信(不知道為什麼)，總之就是不要用SMTP認證。

Sending Emails using Gmail

如果要利用phpmailer由Gmail發信，要設定google account:

未開啟兩階段認證:

要啟用”允許安全性較低的應用程式”

注意: 有可能在帳戶中找不到這個選項，應該是有使用G Suite而且權限被Dsiable, G Suite的設定參考這一篇

$this->mail= new PHPMailer();
$this->mail->From = $this->sender['email'];
$this->mail->FromName = $this->sender['name'];
$this->mail->IsHTML(true);

$this->mail->isSMTP();
$this->mail->Host = $this->smtp['host'];
$this->mail->SMTPAuth = true;
$this->mail->Username = $this->smtp['user_name'];
$this->mail->Password = $this->smtp['password'];
$this->mail->SMTPSecure = 'tls';
$this->mail->CharSet = "utf-8";
$this->mail->Encoding = "base64";
$this->mail->Port = 587;
$this->mail->SMTPDebug = false;

$this->mail= new PHPMailer();

$this->mail->From = $this->sender['email'];

$this->mail->FromName = $this->sender['name'];

$this->mail->IsHTML(true);

$this->mail->isSMTP();

$this->mail->Host = $this->smtp['host'];

$this->mail->SMTPAuth = true;

$this->mail->Username = $this->smtp['user_name'];

$this->mail->Password = $this->smtp['password'];

$this->mail->SMTPSecure = 'tls';

$this->mail->CharSet = "utf-8";

$this->mail->Encoding = "base64";

$this->mail->Port = 587;

$this->mail->SMTPDebug = false;

已啟用兩階段認證:

要取得應用程式密碼

Google Place API

Get an API key
Get library
Get library
Get library

Library: https://developers.google.com/maps/documentation/javascript/places

Example: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

Place types of autocomplete service:
https://developers.google.com/places/supported_types#table3

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[Your Key]&libraries=places"></script>

1	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[Your Key]&libraries=places"></script>

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'short_name',
  postal_code: 'short_name'
};

$(document).ready(function(){
	initAutocomplete();
});

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
	// Get the place details from the autocomplete object.
	var p = autocomplete.getPlace();
	console.log(p);

	// Get each component of the address from the place details
	// and fill the corresponding field on the form.
	var $c = $('.place-box');
	var cps = p.address_components;

	$c.find('[name="name"]').val(p.name);
	$c.find('[name="gmap_id"]').val(p.place_id);
	$c.find('[name="photo"]').val(get_photo(p));
	$c.find('[name="address"]').val(p.formatted_address);
	$c.find('[name="city"]').val(find_add_part(cps, 'administrative_area_level_1', 'long'));
	$c.find('[name="country"]').val(find_add_part(cps, 'country', 'short'));
	$c.find('[name="latitude"]').val(p.geometry.location.lat);
	$c.find('[name="longitude"]').val(p.geometry.location.lng);
	$c.find('[name="phone"]').val(p.international_phone_number);
	$c.find('[name="url"]').val(p.url);
}

function find_add_part(components, targetType, name_type){
	if(name_type == 'long'){
		var name_type = 'long_name';
	}else{
		var name_type = 'short_name';
	}

	for (var i = 0; i < components.length; i++) {
		var cp = components[i];
	    var types = cp.types;

	    for (var j = 0; j < types.length; j++) {
	    	var addType = types[j];
		    if (targetType == addType) {
		      var val = cp[name_type];
		      //document.getElementById(addressType).value = val;
		      return val;
		    }
		}
	}

	return '';
}

function get_photo(p){
	if(p.photos == null || p.photos.length == 0){
		return '';
	}
	
	var photo = p.photos[0];
	return photo.getUrl({'maxWidth': 500});
}

function get_place_detail(p){
	var params = {
		'placeid': p.place_id, 
		'key': 'key'
	}

	$.get(base_url + 'assets/place_detail.json', params, function(data){
		//console.log(data);
		var p = data.result;

		var $c = $('.place-box');

		$c.find('[name="name"]').val(p.name);
		$c.find('[name="gmap_id"]').val(p.place_id);
		$c.find('[name="photo"]').val(p.icon);
		$c.find('[name="address"]').val(p.formatted_address);
		$c.find('[name="city"]').val(p.address_components[2].long_name);
		$c.find('[name="country"]').val(p.address_components[4].short_name);
		$c.find('[name="latitude"]').val(p.geometry.location.lat);
		$c.find('[name="longitude"]').val(p.geometry.location.lng);
		$c.find('[name="phone"]').val(p.international_phone_number);
		$c.find('[name="url"]').val(p.url);
	});
}

function clear_fields(){
	var $c = $('.place-box');

	$c.find('[name="name"]').val('');
	$c.find('[name="gmap_id"]').val('');
	$c.find('[name="photo"]').val('');
	$c.find('[name="address"]').val('');
	$c.find('[name="city"]').val('');
	$c.find('[name="country"]').val('');
	$c.find('[name="latitude"]').val('');
	$c.find('[name="longitude"]').val('');
	$c.find('[name="phone"]').val('');
	$c.find('[name="url"]').val('');
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

var placeSearch, autocomplete;

var componentForm = {

street_number: 'short_name',

route: 'long_name',

locality: 'long_name',

administrative_area_level_1: 'short_name',

country: 'short_name',

postal_code: 'short_name'

};

$(document).ready(function(){

initAutocomplete();

});

function initAutocomplete() {

// Create the autocomplete object, restricting the search to geographical

// location types.

autocomplete = new google.maps.places.Autocomplete(

/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),

{types: ['geocode']});

// When the user selects an address from the dropdown, populate the address

// fields in the form.

autocomplete.addListener('place_changed', fillInAddress);

}

function fillInAddress() {

// Get the place details from the autocomplete object.

var p = autocomplete.getPlace();

console.log(p);

// Get each component of the address from the place details

// and fill the corresponding field on the form.

var $c = $('.place-box');

var cps = p.address_components;

$c.find('[name="name"]').val(p.name);

$c.find('[name="gmap_id"]').val(p.place_id);

$c.find('[name="photo"]').val(get_photo(p));

$c.find('[name="address"]').val(p.formatted_address);

$c.find('[name="city"]').val(find_add_part(cps, 'administrative_area_level_1', 'long'));

$c.find('[name="country"]').val(find_add_part(cps, 'country', 'short'));

$c.find('[name="latitude"]').val(p.geometry.location.lat);

$c.find('[name="longitude"]').val(p.geometry.location.lng);

$c.find('[name="phone"]').val(p.international_phone_number);

$c.find('[name="url"]').val(p.url);

}

function find_add_part(components, targetType, name_type){

if(name_type == 'long'){

var name_type = 'long_name';

}else{

var name_type = 'short_name';

}

for (var i = 0; i < components.length; i++) {

var cp = components[i];

var types = cp.types;

for (var j = 0; j < types.length; j++) {

var addType = types[j];

if (targetType == addType) {

var val = cp[name_type];

//document.getElementById(addressType).value = val;

return val;

}

return '';

}

function get_photo(p){

if(p.photos == null || p.photos.length == 0){

return '';

}

var photo = p.photos[0];

return photo.getUrl({'maxWidth': 500});

}

function get_place_detail(p){

var params = {

'placeid': p.place_id,

'key': 'key'

}

$.get(base_url + 'assets/place_detail.json', params, function(data){

//console.log(data);

var p = data.result;

var $c = $('.place-box');

$c.find('[name="name"]').val(p.name);

$c.find('[name="gmap_id"]').val(p.place_id);

$c.find('[name="photo"]').val(p.icon);

$c.find('[name="address"]').val(p.formatted_address);

$c.find('[name="city"]').val(p.address_components[2].long_name);

$c.find('[name="country"]').val(p.address_components[4].short_name);

$c.find('[name="latitude"]').val(p.geometry.location.lat);

$c.find('[name="longitude"]').val(p.geometry.location.lng);

$c.find('[name="phone"]').val(p.international_phone_number);

$c.find('[name="url"]').val(p.url);

});

}

function clear_fields(){

var $c = $('.place-box');

$c.find('[name="name"]').val('');

$c.find('[name="gmap_id"]').val('');

$c.find('[name="photo"]').val('');

$c.find('[name="address"]').val('');

$c.find('[name="city"]').val('');

$c.find('[name="country"]').val('');

$c.find('[name="latitude"]').val('');

$c.find('[name="longitude"]').val('');

$c.find('[name="phone"]').val('');

$c.find('[name="url"]').val('');

}

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Category Archives: Google

在網站中加入動態再行銷代碼

使用符合業務類型的自訂參數

設定目標對象來源

全域網站代碼

事件程式碼片段

Tag Manager and gtag.js

Google Ads Related Tags in GTM

自訂變數

維度Dimensions & 指標Metrics

Example to build datalayer for Google Enhanced Ecommerce

Config Pixel Purchase in Google Tag Manager

Google Analytics Ecommerce tracking via Tag Manager

Tag Manager + Pixel

G Suite 使用說明

管理網域:

低安全性應用程式帳戶存取設定(Allow less secure apps)

APP應用程式密碼:

驗證網域:

DNS中的MX設定:

SMTP:

Sending Emails using Gmail

未開啟兩階段認證:

已啟用兩階段認證:

Google Place API

January 2020
M	T	W	T	F	S	S
« Dec
		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