ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingจากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ  (อ่าน 2192 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
memo4219
ก๊วนเสียว
*

พลังน้ำใจ: 12
ออฟไลน์ ออฟไลน์

กระทู้: 244



ดูรายละเอียด เว็บไซต์
« เมื่อ: 14 กรกฎาคม 2017, 14:32:58 »

โค๊ด:
<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;">
Text Link
</a>

ลองเพิ่ม target="_blank" ลงใน tag <a> แล้วมันก็ไม่ยอมเปิดหน้าใหม่

หรือต้องไปแก้ในฟังก์ชั่น

โค๊ด:
<script>
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = url;}
   });
}
</script>

ไม่เก่งเรื่องโค้ดเลย รบกวนช่วยดูให้หน่อยครับ
« แก้ไขครั้งสุดท้าย: 14 กรกฎาคม 2017, 14:33:49 โดย memo4219 » บันทึกการเข้า
ฮารุมิจิ
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 71
ออฟไลน์ ออฟไลน์

กระทู้: 1,553



ดูรายละเอียด
« ตอบ #1 เมื่อ: 14 กรกฎาคม 2017, 14:35:34 »

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

ลองดูอันนี้ครับ
บันทึกการเข้า
memo4219
ก๊วนเสียว
*

พลังน้ำใจ: 12
ออฟไลน์ ออฟไลน์

กระทู้: 244



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 14 กรกฎาคม 2017, 14:42:17 »

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

ลองดูอันนี้ครับ

ขอบคุณครับสำหรับคำแนะนำ

แต่โค้ดสคริป ด้านบนมันเป็นสคริปที่ได้มาจาก Google Analytics Tracking อ่ะครับ เลยไม่แน่ใจว่าเปลี่ยนแล้วจะได้ไหม
ผมกะดูไม่รู้เรื่อง เลยนึกว่าสามารถใส่แอดทิบิวไรเพิ่ม แบบพวก html จะได้ไหม แบบไม่เปลี่ยนโค้ด แต่เพิ่มนิดหน่อยนะครับ
บันทึกการเข้า
kumabro
Newbie
*

พลังน้ำใจ: 2
ออฟไลน์ ออฟไลน์

กระทู้: 24



ดูรายละเอียด
« ตอบ #3 เมื่อ: 18 กรกฎาคม 2017, 11:03:59 »

ลองแก้ hitCallback ดูครับ
โค๊ด:
<script>
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){window.open(url, '_blank');}
   });
}
</script>
บันทึกการเข้า
sputtaro
สมุนแก๊งเสียว
*

พลังน้ำใจ: 139
ออฟไลน์ ออฟไลน์

กระทู้: 910



ดูรายละเอียด
« ตอบ #4 เมื่อ: 18 กรกฎาคม 2017, 11:22:39 »

คุณอาจเขียนโค๊ดผิด หรือ มีจาวาสคริปท์อื่นบังคับไว้ก็ได้
ลองตรวจสอบให้แน่ใจก่อน โดย
ใช้โค๊ดนี้
<a href="http://www.example.com " target="_blank">
Text Link
</a>

**********************************
ตัวอย่างโค๊ดที่ผมใช้งานอยู่
เขียนใน php นะครับ

echo '<p class="text-center">';
echo '<span><a class="buybutton" rel="nofollow" onClick="ga(\'send\',\'event\',\'Link\',\'Click\',event.target.href);" href="'.$linkurl.'" target="_blank" title="'.ucwords($Key).'" >';
echo 'Buy Now '.$Price.'';
echo '</a></span>';
echo '</p>';

*******************************************
โค๊ดของ GA นั้น มีวัตถุประสงค์เพื่อส่งข้อมูล event ไปยังระบบของ GA
ถ้าคุณไปแก้ไขโค๊ด หวังว่าคุณคงจะรู้เรื่องโค๊ดนั้นดีอยู่แล้วนะครับ
 
บันทึกการเข้า
memo4219
ก๊วนเสียว
*

พลังน้ำใจ: 12
ออฟไลน์ ออฟไลน์

กระทู้: 244



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 18 กรกฎาคม 2017, 17:20:37 »

ลองแก้ hitCallback ดูครับ
โค๊ด:
<script>
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){window.open(url, '_blank');}
   });
}
</script>

ขอบคุณมากครับ เดียวลอง test แล้วจะมารายงานผลครับ  wanwan017
บันทึกการเข้า
memo4219
ก๊วนเสียว
*

พลังน้ำใจ: 12
ออฟไลน์ ออฟไลน์

กระทู้: 244



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 18 กรกฎาคม 2017, 17:22:11 »

คุณอาจเขียนโค๊ดผิด หรือ มีจาวาสคริปท์อื่นบังคับไว้ก็ได้
ลองตรวจสอบให้แน่ใจก่อน โดย
ใช้โค๊ดนี้
<a href="http://www.example.com " target="_blank">
Text Link
</a>

**********************************
ตัวอย่างโค๊ดที่ผมใช้งานอยู่
เขียนใน php นะครับ

echo '<p class="text-center">';
echo '<span><a class="buybutton" rel="nofollow" onClick="ga(\'send\',\'event\',\'Link\',\'Click\',event.target.href);" href="'.$linkurl.'" target="_blank" title="'.ucwords($Key).'" >';
echo 'Buy Now '.$Price.'';
echo '</a></span>';
echo '</p>';

*******************************************
โค๊ดของ GA นั้น มีวัตถุประสงค์เพื่อส่งข้อมูล event ไปยังระบบของ GA
ถ้าคุณไปแก้ไขโค๊ด หวังว่าคุณคงจะรู้เรื่องโค๊ดนั้นดีอยู่แล้วนะครับ
 


แบบ HTML ใส่ _blank ลองแล้วครับไม่ได้ครับ เพราะเหมือนมีสคริปคลุมอยู่อีกที
ปัญหาคือ ส่วนของจาวาสคริป ผมไม่เป็นเลยครับ เลยต้องมาขอความช่วยเหลือครับ
เผื่อมีคนมีความรู้ทางด้านนี้

 wanwan017

ขอถามเพิ่มนะครับ เห็นใช้รุปแบบต่างออกไป ไม่ทราบแบบลิงค์ที่คุณใช้ เราจะต้องเพิ่ม Code ที่เพิ่มในส่วน <head> ด้วยหรือปล่าวครับ

พอดีแบบที่ผมเอามาถาม หามาได้จาก Analytics Help ตามลิงค์นี้ครับ https://support.google.com/analytics/answer/1136920?hl=en


ผมเคยเจอแบบ คล้ายๆ ของที่คุณโพสต์ ที่ http://www.featuringtae.com/ วิธีใช้งาน-event-tracking-ใน-google-analytics/
แต่ลองใส่ ลองคลิก แล้วใน Event ไม่มีผลอะไร เลยคิดว่าอาจจะตกหล่นอะไรไป
ผมเพิ่งลองศึกษาเรื่องนี้เลยยัง งง อยู่ครับ ถ้ายินดี รบกวนขอคำแนะนำเพิ่มเติมครับ

 wanwan017
« แก้ไขครั้งสุดท้าย: 18 กรกฎาคม 2017, 17:28:11 โดย memo4219 » บันทึกการเข้า
sputtaro
สมุนแก๊งเสียว
*

พลังน้ำใจ: 139
ออฟไลน์ ออฟไลน์

กระทู้: 910



ดูรายละเอียด
« ตอบ #7 เมื่อ: 18 กรกฎาคม 2017, 18:15:59 »

การแทรกกิ้งของ GA ทำได้ตามเวอร์ชั่นที่ใช้

ผมใช้ analytics.js ครับ

โดยแทรกโค๊ด GA ไว้ในส่วน body
ตามนี้ครับ
โค๊ด:
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-111-1', 'auto');
  ga('send', 'pageview');

</script>

และเพิ่ม Event Tracking
ไว้ตรงแท็ก ที่ต้องการแทรกกิ้ง
ตามตัวอย่างในเม้นท์ก่อน

Event Tracking >> https://developers.google.com/.../collection/analyticsjs/events
Google Analytics events >> https://support.google.com/tag...3918367093-2178303671&rd=1

เมื่อมีการคลิ๊กที่ลิ้ง จะเป็นข้อความ หรือภาพก็ตาม เราสามารถเช็คได้ โดยล็อกอินไปที่
GA > BEHAViOR > Events > Overview ก็จะเห็นรายละเอียด
 
หรือหากต้องการทราบแบบ RealTime ก็ไปที่

GA > REAL-TIME > Events > แต่กรณีนี้จะเห็นเฉพาะแบบ Real Time เท่านั้น

ไม่ยากครับ ค่อยเป็นค่อยไปนะครับ

ตอนนี้ลองเช็คโค๊ดคุณให้ใช้ได้ก่อนแล้วกันครับ
บันทึกการเข้า
kumabro
Newbie
*

พลังน้ำใจ: 2
ออฟไลน์ ออฟไลน์

กระทู้: 24



ดูรายละเอียด
« ตอบ #8 เมื่อ: 19 กรกฎาคม 2017, 11:36:30 »

ขออภัยครับเมื่อวานรีบไปหน่อยเลยไม่ได้อธิบาย วันนี้เลยมาตอบให้ละเอียดขึ้นนะครับ
 wanwan017 wanwan017 wanwan017

1. ที่กด link แล้วไม่เปิด tab ใหม่แม้จะใส่ _blank แล้วเพราะ onclick="trackOutboundLink('http://www.example.com '); return false;" ครับ
อธิบายการทำงานคือเรียก trackOutboundLink() แล้ว return = จบ event click ที่ทำอยู่ครับ
ซึ่งถ้าแก้เป็นแบบนี้ก็น่าจะเปิด tab ใหม่ตามที่ต้องการเหมือนกันครับ
โค๊ด:
<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com');" target="_blank">
Text Link
</a>

2. จากข้อ 1 อาจจะมีคำถามว่า อ้าว จบ event แล้วทำไมยัง redirect ไป http://www.example.com อีกล่ะ (แถมไม่เปิด tab ใหม่ให้อีก)
ลองมาดูที่ trackOutboundLink() กันนะครับ
โค๊ด:
<script>
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = url;}
   });
}
</script>

จะเห็นว่าตอนเรียก ga เราส่ง option 'hitCallback': function(){document.location = url;} ไป
อธิบายย่อๆคือ hitCallback จะทำงานหลังจากเรียก ga แล้ว จะให้ alert, redirect หรืออะไรก็ได้ครับ
* คำอธิบายแบบเต็มตามนี้เลยครับผม https://developers.google.com/...js/field-reference#hitCallback
ซึ่งจากโค้ด สิ่งที่เราให้มันทำก็คือ document.location = url; ครับ redirect ธรรมดานั่นเอง ผมจึงเสนอให้แก้เป็น window.open ซึ่งระบุ target ได้แทนครับ

ขอย้อนไปดูโค้ดของท่าน sputtaro นะครับ
โค๊ด:
echo '<span><a class="buybutton" rel="nofollow" onClick="ga('send','event','Link','Click',event.target.href);" href="'.$linkurl.'" target="_blank" title="'.ucwords($Key).'" >';

ผลที่ออกมาจะได้ประมาณนี้ครับ
<span><a class="buybutton" rel="nofollow" onClick="ga('send','event','Link','Click',event.target.href);" href="'http://www.example.com '" target="_blank" title="title-na-kub" >
เทียบกับโค้ดในข้อ 1 จะเห็นว่าไม่มี return ใน onclick และใส่ target="_blank" เหมือนกันครับ ^^
ต่างกันที่ท่าน sputtaro เรียก ga เลย แต่เราไปเรียกใน function แยก และท่าน sputtaro ไม่ได้ส่ง option ไปครับ ซึ่งมันก็ optional อยู่แล้ว

สรุป เจอ 2 ทางออกครับ
1. วิธีเมื่อวาน ไม่ต้องแก้ <a>
โค๊ด:
<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;">
Text Link
</a>

<script>
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){window.open(url, '_blank');}
   });
}
</script>

2. วิธีท่าน sputtaro เอา hitCallback ออกเลยก็ได้ครับ ไม่งั้นจะทั้งเปิด tab ใหม่และ redirect ใน tab ปัจจุบัน
โค๊ด:
<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com');" target="_blank">
Text Link
</a>

<script>
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon'
   });
}
</script>


... จบแล้ว ขอให้แก้ได้ไวๆ ปลอดภัยไม่มีบั๊กนะครับ ...
 wanwan020 wanwan020 wanwan020

ปล. ผมลองเขียน html ขึ้นมาทดสอบแต่ไม่ได้ลองกับ ga ตรงๆนะครับ
ปล.1 ถ้าผิดพลาดประการใดขออภัยด้วยครับ  wanwan009
บันทึกการเข้า
sputtaro
สมุนแก๊งเสียว
*

พลังน้ำใจ: 139
ออฟไลน์ ออฟไลน์

กระทู้: 910



ดูรายละเอียด
« ตอบ #9 เมื่อ: 19 กรกฎาคม 2017, 13:59:40 »

ท่าน kumabro อธิบายละเอียดดี
ผม +1 ให้นะครับ
บันทึกการเข้า
kumabro
Newbie
*

พลังน้ำใจ: 2
ออฟไลน์ ออฟไลน์

กระทู้: 24



ดูรายละเอียด
« ตอบ #10 เมื่อ: 19 กรกฎาคม 2017, 15:02:53 »

ท่าน kumabro อธิบายละเอียดดี
ผม +1 ให้นะครับ

ขอบคุณท่าน sputtaro มากครับ
 wanwan017 wanwan017 wanwan017
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์