Category Archives: Google

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('');

}

Track Link Clicks – Google Analytics Event

http://newaurora.pixnet.net/blog/post/171431715-google-analytics%E4%BD%BF%E7%94%A8analytics.js-%E4%BA%8B%E4%BB%B6%E8%BF%BD%E8%B9%A4

tinyMap to handle Google Map

http://app.essoduke.org/tinyMap/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.tinyMap.min.js"></script>

<div id="gmap" style="width: 100%; height: 440px"></div>

Javascript

function init_map(){
	map = $('#gmap');
	map.tinyMap({
		zoom: 3,
		scrollwheel: false,
	    marker: [
	        {addr: ['33.882648', '130.879787'], text: 'Kyomachi Shop', 'id': 'Kyomachi Shop'},
	        {addr: ['33.885827', '130.880040'], text: 'Uomachi Shop', 'id': 'Uomachi Shop'},
	        {addr: ['33.885411', '130.882519'], text: 'COLET Shop', 'id': 'COLET Shop'},
	        {addr: ['25.042333', '121.544913'], text: 'Taipei SOGO Branch', 'id': 'Taipei SOGO Branch'},
	        {addr: ['25.040868', '121.565605'], text: 'Taipei HanKyu Branch', 'id': 'Taipei HanKyu Branch'},
	        {addr: ['1.274893', '103.843510'], text: '100AM Shop', 'id': '100AM Shop'},
	        {addr: ['1.301506', '103.838549'], text: '313somerset Shop', 'id': '313somerset Shop'},
	        {addr: ['31.205884', '121.467854'], text: 'SunMoonLightCenter', 'id': 'SunMoonLightCenter'},
			{addr: ['31.233118', '121.411928'], text: 'GLOBAL HARBOR', 'id': 'GLOBAL HARBOR'}
		]
	});


	$('#gmapcontrols button').on('click', function(e){
		var obj = $(this),
	        id = obj.text(),
	        m = {},
	        marker = {},
	        markers = [],
	        i = 0;
	    // 取得 tinyMap 實例
	    m = map.data('tinyMap');
	    // 取得所有標記
	    markers = m._markers;
	    close_all_markers();

	    for (i = 0; i < markers.length; i += 1) {
	        marker = markers[i];
	        // 若標記 id 符合則開啟 infoWindow
	        if (id === marker.id) {
	            marker.infoWindow.open(m.map, marker);
	            // 移動地圖
	            m.map.panTo(marker.position);
	            map.tinyMap('modify', {zoom:15})
	            break;
	        }
	    }
	});
}

function close_all_markers(){
	// 取得 tinyMap 實例
    m = map.data('tinyMap');
    // 取得所有標記
    markers = m._markers;

    for (i = 0; i < markers.length; i++) {
        marker = markers[i];
        // 關閉所有 infoWindow
        marker.infoWindow.close();
    }
}

function init_map(){

map = $('#gmap');

map.tinyMap({

zoom: 3,

scrollwheel: false,

marker: [

{addr: ['33.882648', '130.879787'], text: 'Kyomachi Shop', 'id': 'Kyomachi Shop'},

{addr: ['33.885827', '130.880040'], text: 'Uomachi Shop', 'id': 'Uomachi Shop'},

{addr: ['33.885411', '130.882519'], text: 'COLET Shop', 'id': 'COLET Shop'},

{addr: ['25.042333', '121.544913'], text: 'Taipei SOGO Branch', 'id': 'Taipei SOGO Branch'},

{addr: ['25.040868', '121.565605'], text: 'Taipei HanKyu Branch', 'id': 'Taipei HanKyu Branch'},

{addr: ['1.274893', '103.843510'], text: '100AM Shop', 'id': '100AM Shop'},

{addr: ['1.301506', '103.838549'], text: '313somerset Shop', 'id': '313somerset Shop'},

{addr: ['31.205884', '121.467854'], text: 'SunMoonLightCenter', 'id': 'SunMoonLightCenter'},

{addr: ['31.233118', '121.411928'], text: 'GLOBAL HARBOR', 'id': 'GLOBAL HARBOR'}

]

});

$('#gmapcontrols button').on('click', function(e){

var obj = $(this),

id = obj.text(),

m = {},

marker = {},

markers = [],

i = 0;

// 取得 tinyMap 實例

m = map.data('tinyMap');

// 取得所有標記

markers = m._markers;

close_all_markers();

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

marker = markers[i];

// 若標記 id 符合則開啟 infoWindow

if (id === marker.id) {

marker.infoWindow.open(m.map, marker);

// 移動地圖

m.map.panTo(marker.position);

map.tinyMap('modify', {zoom:15})

break;

}

});

}

function close_all_markers(){

// 取得 tinyMap 實例

m = map.data('tinyMap');

// 取得所有標記

markers = m._markers;

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

marker = markers[i];

// 關閉所有 infoWindow

marker.infoWindow.close();

}

Tracking Events Using New “ga”

To track clicks using Google Analytics, you have to send a tracking event back to google manually:

ga('send', 'event', 'Collections', 'View', $data.title);

1	ga('send', 'event', 'Collections', 'View', $data.title);

Reference:

https://developers.google.com/analytics/devguides/collection/analyticsjs/events

Prevent Invalid Click (Google)

What you can't do:

Prevent people spoofing their IPs.
Block IP addresses on sites you don't control (e.g. Google search results).

What you can do:

Google employs automatic filters to combat click fraud and invalid clicks, but has a number of suggestions for things you can do to monitor and detect invalid clicks yourself:

Track invalid clicks already captured by Google using the Invalid Clicks column.
Monitor the conversion rate of clicks to look for sudden drops or unexpected behaviour.
Try the invalid clicks troubleshooter.
Report suspected invalid clicks (within the U.S. or outside the U.S.)
Relax. Click fraud would be a huge threat to Google's business if they ignored it, so it's in their interest to actively counter it and investigate your concerns.

Reference:

How Google prevents invalid activity:
https://support.google.com/adsense/answer/1348752
How you can help to prevent invalid activity:
https://support.google.com/adsense/answer/1112983?hl=en
http://webmasters.stackexchange.com/questions/8252/how-can-i-prevent-invalid-clicks-on-my-adwords-campaigns
部分有关广告联盟作弊与反作弊资料收集
http://www.lvjiyong.com/i356.html

Google Map Event Closure Problem

google.maps.event.addListener(marker, &#39;click&#39;, function(innerMarker, innerItem) {
      return function() {
          //infowindows[innerKey].open(map, markers[innerKey]);
          //Info window of this marker
          var infowindow = new google.maps.InfoWindow({
            content: &#39;&lt;div class=&quot;info_wrapper&quot;&gt;&lt;img src=&quot;&#39; + get_icon(innerItem.appicon) + &#39;&quot; class=&quot;app_icon&quot;/&gt;&#39; + 
              &#39;&lt;span class=&quot;info_title&quot;&gt;&lt;strong&gt;&#39; + innerItem.title + &#39;&lt;/strong&gt;&lt;/span&gt;&#39; + 
              &#39;&lt;span class=&quot;info_desc&quot;&gt;&#39; + innerItem.description + &#39;&lt;/span&gt;&#39; + 
              &#39;&lt;/div&gt;&#39;, 
            maxWidth: 200
          });

          infowindow.open(map,innerMarker);
      }
    }(marker, item));

google.maps.event.addListener(marker, 'click', function(innerMarker, innerItem) {

return function() {

//infowindows[innerKey].open(map, markers[innerKey]);

//Info window of this marker

var infowindow = new google.maps.InfoWindow({

content: '<div class="info_wrapper"><img src="' + get_icon(innerItem.appicon) + '" class="app_icon"/>' +

'<span class="info_title"><strong>' + innerItem.title + '</strong></span>' +

'<span class="info_desc">' + innerItem.description + '</span>' +

'</div>',

maxWidth: 200

});

infowindow.open(map,innerMarker);

}

}(marker, item));

Reference:

http://stackoverflow.com/questions/7044587/adding-multiple-markers-with-infowindows-google-maps-api

Rex's Personal Site

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

Category Archives: Google

Tag Manager + Pixel

G Suite 使用說明

管理網域:

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

APP應用程式密碼:

驗證網域:

DNS中的MX設定:

SMTP:

Sending Emails using Gmail

未開啟兩階段認證:

已啟用兩階段認證:

Google Place API

Track Link Clicks – Google Analytics Event

tinyMap to handle Google Map

Tracking Events Using New “ga”

Prevent Invalid Click (Google)

What you can't do:

What you can do:

Google Map Event Closure Problem

September 2017
M	T	W	T	F	S	S
« Aug
				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