ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: memo4219 ที่ 14 กรกฎาคม 2017, 14:32:58


หัวข้อ: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: memo4219 ที่ 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>

ไม่เก่งเรื่องโค้ดเลย รบกวนช่วยดูให้หน่อยครับ

หัวข้อ: Re: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: ฮารุมิจิ ที่ 14 กรกฎาคม 2017, 14:35:34
function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

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

หัวข้อ: Re: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: memo4219 ที่ 14 กรกฎาคม 2017, 14:42:17
อ้างจาก: ฮารุมิจิ ที่ 14 กรกฎาคม 2017, 14:35:34
function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

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

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

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

หัวข้อ: Re: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: kumabro ที่ 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>

หัวข้อ: Re: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: sputtaro ที่ 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
ถ้าคุณไปแก้ไขโค๊ด หวังว่าคุณคงจะรู้เรื่องโค๊ดนั้นดีอยู่แล้วนะครับ
 

หัวข้อ: Re: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: memo4219 ที่ 18 กรกฎาคม 2017, 17:20:37
อ้างจาก: kumabro ที่ 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>

ขอบคุณมากครับ เดียวลอง test แล้วจะมารายงานผลครับ  :wanwan017:

หัวข้อ: Re: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: memo4219 ที่ 18 กรกฎาคม 2017, 17:22:11
อ้างจาก: sputtaro ที่ 18 กรกฎาคม 2017, 11:22:39
คุณอาจเขียนโค๊ดผิด หรือ มีจาวาสคริปท์อื่นบังคับไว้ก็ได้
ลองตรวจสอบให้แน่ใจก่อน โดย
ใช้โค๊ดนี้
<a href="[url]http://www.example.com[/url]" 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:

หัวข้อ: Re: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: sputtaro ที่ 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/analytics/devguides/collection/analyticsjs/events
Google Analytics events >> https://support.google.com/tagmanager/answer/6106716?visit_id=0-636359723918367093-2178303671&rd=1

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

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

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

ตอนนี้ลองเช็คโค๊ดคุณให้ใช้ได้ก่อนแล้วกันครับ

หัวข้อ: Re: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: kumabro ที่ 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/analytics/devguides/collection/analyticsjs/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:

หัวข้อ: Re: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: sputtaro ที่ 19 กรกฎาคม 2017, 13:59:40
ท่าน kumabro อธิบายละเอียดดี
ผม +1 ให้นะครับ

หัวข้อ: Re: จากโค้ดนี้ ทำยังไงให้คลิกแล้ว Open New Window ครับ
เริ่มหัวข้อโดย: kumabro ที่ 19 กรกฎาคม 2017, 15:02:53
อ้างจาก: sputtaro ที่ 19 กรกฎาคม 2017, 13:59:40
ท่าน kumabro อธิบายละเอียดดี
ผม +1 ให้นะครับ

ขอบคุณท่าน sputtaro มากครับ
 :wanwan017: :wanwan017: :wanwan017:


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com