[{"data":1,"prerenderedAt":1461},["ShallowReactive",2],{"\u002Fblog\u002Fcapturing-media-events-with-plyr":3},{"id":4,"title":5,"body":6,"categories":1449,"date":1451,"description":1452,"extension":1453,"image":1454,"meta":1455,"navigation":67,"path":1456,"seo":1457,"sitemap":1458,"stem":1459,"tags":1454,"__hash__":1460},"blog\u002Fblog\u002Fcapturing-media-events-with-plyr.md","Capturing media events with Plyr and Google Analytics",{"type":7,"value":8,"toc":1444},"minimark",[9,13,18,21,104,108,119,283,286,289,850,854,857,1431,1440],[10,11,12],"p",{},"Plyr is one of the best media player Javascript packages that I haven't used so far. It's great for handling video playback, as well as audio playback, with the added bonus of being very customizable! If you are using Plyr for your web app or marketing website, then naturally you will probably want to also capture some of the usage for your web analytics reports and see if people are actually consuming your content.",[14,15,17],"h2",{"id":16},"setting-up-plyr","Setting up Plyr",[10,19,20],{},"If you have not already setup Plyr on your site, be sure to check out their documentation for getting started and setting up the first bit of code. For the purposes of this article, we will focus on the Javascript implementation, but you can modify and customize it in many other ways. In your JS file, add the following to get started",[22,23,29],"pre",{"className":24,"code":25,"filename":26,"language":27,"meta":28,"style":28},"language-js shiki shiki-themes material-theme-lighter material-theme-palenight","import Plyr from 'plyr';\n\nconst player = new Plyr('#player');\n","main.js","js","",[30,31,32,62,69],"code",{"__ignoreMap":28},[33,34,37,41,45,48,52,56,59],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sNZSE","import",[33,42,44],{"class":43},"sv0dM"," Plyr ",[33,46,47],{"class":39},"from",[33,49,51],{"class":50},"s4Nzc"," '",[33,53,55],{"class":54},"s9-rc","plyr",[33,57,58],{"class":50},"'",[33,60,61],{"class":50},";\n",[33,63,65],{"class":35,"line":64},2,[33,66,68],{"emptyLinePlaceholder":67},true,"\n",[33,70,72,76,79,82,85,89,92,94,97,99,102],{"class":35,"line":71},3,[33,73,75],{"class":74},"sBv9x","const",[33,77,78],{"class":43}," player ",[33,80,81],{"class":50},"=",[33,83,84],{"class":50}," new",[33,86,88],{"class":87},"sp2xM"," Plyr",[33,90,91],{"class":43},"(",[33,93,58],{"class":50},[33,95,96],{"class":54},"#player",[33,98,58],{"class":50},[33,100,101],{"class":43},")",[33,103,61],{"class":50},[14,105,107],{"id":106},"capturing-events","Capturing events",[10,109,110,111,118],{},"We will the on() event listener to look for specific events that we will hook into to capture Google Analytics details. Here is a list of the current supported events to listen to as of v3.7.8, but you can find a more ",[112,113,117],"a",{"href":114,"rel":115},"https:\u002F\u002Fgithub.com\u002Fsampotts\u002Fplyr#standard-media-events",[116],"nofollow","up to date list here",".",[120,121,122,135],"table",{},[123,124,125],"thead",{},[126,127,128,132],"tr",{},[129,130,131],"th",{},"Event Type",[129,133,134],{},"Description",[136,137,138,147,155,163,171,179,187,195,203,211,219,227,235,243,251,259,267,275],"tbody",{},[126,139,140,144],{},[141,142,143],"td",{},"progress",[141,145,146],{},"Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element’s buffered attribute.",[126,148,149,152],{},[141,150,151],{},"playing",[141,153,154],{},"Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).",[126,156,157,160],{},[141,158,159],{},"play",[141,161,162],{},"Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event.",[126,164,165,168],{},[141,166,167],{},"pause",[141,169,170],{},"Sent when playback is paused.",[126,172,173,176],{},[141,174,175],{},"timeupdate",[141,177,178],{},"The time indicated by the element’s currentTime attribute has changed.",[126,180,181,184],{},[141,182,183],{},"volumechange",[141,185,186],{},"Sent when the audio volume changes (both when the volume is set and when the muted state is changed).",[126,188,189,192],{},[141,190,191],{},"seeking",[141,193,194],{},"Sent when a seek operation begins.",[126,196,197,200],{},[141,198,199],{},"seeked",[141,201,202],{},"Sent when a seek operation completes.",[126,204,205,208],{},[141,206,207],{},"ratechange",[141,209,210],{},"Sent when the playback speed changes.",[126,212,213,216],{},[141,214,215],{},"ended",[141,217,218],{},"Sent when playback completes. Note: This does not fire if autoplay is true.",[126,220,221,224],{},[141,222,223],{},"enterfullscreen",[141,225,226],{},"Sent when the player enters fullscreen mode (either the proper fullscreen or full-window fallback for older browsers).",[126,228,229,232],{},[141,230,231],{},"exitfullscreen",[141,233,234],{},"Sent when the player exits fullscreen mode.",[126,236,237,240],{},[141,238,239],{},"captionsenabled",[141,241,242],{},"Sent when captions are enabled.",[126,244,245,248],{},[141,246,247],{},"captionsdisabled",[141,249,250],{},"Sent when captions are disabled.",[126,252,253,256],{},[141,254,255],{},"languagechange",[141,257,258],{},"Sent when the caption language is changed.",[126,260,261,264],{},[141,262,263],{},"controlshidden",[141,265,266],{},"Sent when the controls are hidden.",[126,268,269,272],{},[141,270,271],{},"controlsshown",[141,273,274],{},"Sent when the controls are shown.",[126,276,277,280],{},[141,278,279],{},"ready",[141,281,282],{},"Triggered when the instance is ready for API calls.",[10,284,285],{},"For our purposes, we will focus on the play, ended, and pause events. The play event will be called everytime the user pushes play, and ended of course is targeted once the media completely finishes, and pause is everytime the media is paused. Our Google Events will be custom events, so feel free to rename these to something more relevant to your tracking system.",[10,287,288],{},"Our Google Analytics event will send over the source URL for all events, as well as the current_time and progress, if relevant. This object is flexible and you can submit more\u002Fless data as you see fit for your team.",[22,290,292],{"className":24,"code":291,"filename":26,"language":27,"meta":28,"style":28},"\u002F\u002F Sent when playback completes.\nplayer.on('ended', (event) => {\n  const instance = event.detail.plyr;\n\n  gtag('event', 'audio_ended', {\n    source: instance.source\n  });\n});\n\n\u002F\u002F Sent when playback is paused\nplayer.on('pause', (event) => {\n  const instance = event.detail.plyr;\n  const progress = ((instance.currentTime \u002F instance.duration) * 100).toFixed(0);\n\n  gtag('event', 'audio_paused', {\n    source: instance.source,\n    current_time: instance.currentTime.toFixed(0),\n    progress,\n  });\n});\n\n\u002F\u002F Sent when playback starts playing\nplayer.on('play', (event) => {\n  const instance = event.detail.plyr;\n  const progress = ((instance.currentTime \u002F instance.duration) * 100).toFixed(0);\n\n  gtag('event', 'audio_play', {\n    source: instance.source,\n    current_time: instance.currentTime.toFixed(0),\n    progress,\n  });\n});\n",[30,293,294,300,336,361,366,394,410,420,430,435,441,470,491,548,553,579,596,622,630,639,648,653,659,688,709,754,759,785,800,825,832,841],{"__ignoreMap":28},[33,295,296],{"class":35,"line":36},[33,297,299],{"class":298},"s742E","\u002F\u002F Sent when playback completes.\n",[33,301,302,305,307,310,312,314,316,318,321,324,328,330,333],{"class":35,"line":64},[33,303,304],{"class":43},"player",[33,306,118],{"class":50},[33,308,309],{"class":87},"on",[33,311,91],{"class":43},[33,313,58],{"class":50},[33,315,215],{"class":54},[33,317,58],{"class":50},[33,319,320],{"class":50},",",[33,322,323],{"class":50}," (",[33,325,327],{"class":326},"scQ8X","event",[33,329,101],{"class":50},[33,331,332],{"class":74}," =>",[33,334,335],{"class":50}," {\n",[33,337,338,341,344,347,350,352,355,357,359],{"class":35,"line":71},[33,339,340],{"class":74},"  const",[33,342,343],{"class":43}," instance",[33,345,346],{"class":50}," =",[33,348,349],{"class":43}," event",[33,351,118],{"class":50},[33,353,354],{"class":43},"detail",[33,356,118],{"class":50},[33,358,55],{"class":43},[33,360,61],{"class":50},[33,362,364],{"class":35,"line":363},4,[33,365,68],{"emptyLinePlaceholder":67},[33,367,369,372,375,377,379,381,383,385,388,390,392],{"class":35,"line":368},5,[33,370,371],{"class":87},"  gtag",[33,373,91],{"class":374},"sbA4_",[33,376,58],{"class":50},[33,378,327],{"class":54},[33,380,58],{"class":50},[33,382,320],{"class":50},[33,384,51],{"class":50},[33,386,387],{"class":54},"audio_ended",[33,389,58],{"class":50},[33,391,320],{"class":50},[33,393,335],{"class":50},[33,395,397,400,403,405,407],{"class":35,"line":396},6,[33,398,399],{"class":374},"    source",[33,401,402],{"class":50},":",[33,404,343],{"class":43},[33,406,118],{"class":50},[33,408,409],{"class":43},"source\n",[33,411,413,416,418],{"class":35,"line":412},7,[33,414,415],{"class":50},"  }",[33,417,101],{"class":374},[33,419,61],{"class":50},[33,421,423,426,428],{"class":35,"line":422},8,[33,424,425],{"class":50},"}",[33,427,101],{"class":43},[33,429,61],{"class":50},[33,431,433],{"class":35,"line":432},9,[33,434,68],{"emptyLinePlaceholder":67},[33,436,438],{"class":35,"line":437},10,[33,439,440],{"class":298},"\u002F\u002F Sent when playback is paused\n",[33,442,444,446,448,450,452,454,456,458,460,462,464,466,468],{"class":35,"line":443},11,[33,445,304],{"class":43},[33,447,118],{"class":50},[33,449,309],{"class":87},[33,451,91],{"class":43},[33,453,58],{"class":50},[33,455,167],{"class":54},[33,457,58],{"class":50},[33,459,320],{"class":50},[33,461,323],{"class":50},[33,463,327],{"class":326},[33,465,101],{"class":50},[33,467,332],{"class":74},[33,469,335],{"class":50},[33,471,473,475,477,479,481,483,485,487,489],{"class":35,"line":472},12,[33,474,340],{"class":74},[33,476,343],{"class":43},[33,478,346],{"class":50},[33,480,349],{"class":43},[33,482,118],{"class":50},[33,484,354],{"class":43},[33,486,118],{"class":50},[33,488,55],{"class":43},[33,490,61],{"class":50},[33,492,494,496,499,501,504,507,509,512,515,517,519,522,525,528,532,534,536,539,541,544,546],{"class":35,"line":493},13,[33,495,340],{"class":74},[33,497,498],{"class":43}," progress",[33,500,346],{"class":50},[33,502,503],{"class":374}," ((",[33,505,506],{"class":43},"instance",[33,508,118],{"class":50},[33,510,511],{"class":43},"currentTime",[33,513,514],{"class":50}," \u002F",[33,516,343],{"class":43},[33,518,118],{"class":50},[33,520,521],{"class":43},"duration",[33,523,524],{"class":374},") ",[33,526,527],{"class":50},"*",[33,529,531],{"class":530},"sRqct"," 100",[33,533,101],{"class":374},[33,535,118],{"class":50},[33,537,538],{"class":87},"toFixed",[33,540,91],{"class":374},[33,542,543],{"class":530},"0",[33,545,101],{"class":374},[33,547,61],{"class":50},[33,549,551],{"class":35,"line":550},14,[33,552,68],{"emptyLinePlaceholder":67},[33,554,556,558,560,562,564,566,568,570,573,575,577],{"class":35,"line":555},15,[33,557,371],{"class":87},[33,559,91],{"class":374},[33,561,58],{"class":50},[33,563,327],{"class":54},[33,565,58],{"class":50},[33,567,320],{"class":50},[33,569,51],{"class":50},[33,571,572],{"class":54},"audio_paused",[33,574,58],{"class":50},[33,576,320],{"class":50},[33,578,335],{"class":50},[33,580,582,584,586,588,590,593],{"class":35,"line":581},16,[33,583,399],{"class":374},[33,585,402],{"class":50},[33,587,343],{"class":43},[33,589,118],{"class":50},[33,591,592],{"class":43},"source",[33,594,595],{"class":50},",\n",[33,597,599,602,604,606,608,610,612,614,616,618,620],{"class":35,"line":598},17,[33,600,601],{"class":374},"    current_time",[33,603,402],{"class":50},[33,605,343],{"class":43},[33,607,118],{"class":50},[33,609,511],{"class":43},[33,611,118],{"class":50},[33,613,538],{"class":87},[33,615,91],{"class":374},[33,617,543],{"class":530},[33,619,101],{"class":374},[33,621,595],{"class":50},[33,623,625,628],{"class":35,"line":624},18,[33,626,627],{"class":43},"    progress",[33,629,595],{"class":50},[33,631,633,635,637],{"class":35,"line":632},19,[33,634,415],{"class":50},[33,636,101],{"class":374},[33,638,61],{"class":50},[33,640,642,644,646],{"class":35,"line":641},20,[33,643,425],{"class":50},[33,645,101],{"class":43},[33,647,61],{"class":50},[33,649,651],{"class":35,"line":650},21,[33,652,68],{"emptyLinePlaceholder":67},[33,654,656],{"class":35,"line":655},22,[33,657,658],{"class":298},"\u002F\u002F Sent when playback starts playing\n",[33,660,662,664,666,668,670,672,674,676,678,680,682,684,686],{"class":35,"line":661},23,[33,663,304],{"class":43},[33,665,118],{"class":50},[33,667,309],{"class":87},[33,669,91],{"class":43},[33,671,58],{"class":50},[33,673,159],{"class":54},[33,675,58],{"class":50},[33,677,320],{"class":50},[33,679,323],{"class":50},[33,681,327],{"class":326},[33,683,101],{"class":50},[33,685,332],{"class":74},[33,687,335],{"class":50},[33,689,691,693,695,697,699,701,703,705,707],{"class":35,"line":690},24,[33,692,340],{"class":74},[33,694,343],{"class":43},[33,696,346],{"class":50},[33,698,349],{"class":43},[33,700,118],{"class":50},[33,702,354],{"class":43},[33,704,118],{"class":50},[33,706,55],{"class":43},[33,708,61],{"class":50},[33,710,712,714,716,718,720,722,724,726,728,730,732,734,736,738,740,742,744,746,748,750,752],{"class":35,"line":711},25,[33,713,340],{"class":74},[33,715,498],{"class":43},[33,717,346],{"class":50},[33,719,503],{"class":374},[33,721,506],{"class":43},[33,723,118],{"class":50},[33,725,511],{"class":43},[33,727,514],{"class":50},[33,729,343],{"class":43},[33,731,118],{"class":50},[33,733,521],{"class":43},[33,735,524],{"class":374},[33,737,527],{"class":50},[33,739,531],{"class":530},[33,741,101],{"class":374},[33,743,118],{"class":50},[33,745,538],{"class":87},[33,747,91],{"class":374},[33,749,543],{"class":530},[33,751,101],{"class":374},[33,753,61],{"class":50},[33,755,757],{"class":35,"line":756},26,[33,758,68],{"emptyLinePlaceholder":67},[33,760,762,764,766,768,770,772,774,776,779,781,783],{"class":35,"line":761},27,[33,763,371],{"class":87},[33,765,91],{"class":374},[33,767,58],{"class":50},[33,769,327],{"class":54},[33,771,58],{"class":50},[33,773,320],{"class":50},[33,775,51],{"class":50},[33,777,778],{"class":54},"audio_play",[33,780,58],{"class":50},[33,782,320],{"class":50},[33,784,335],{"class":50},[33,786,788,790,792,794,796,798],{"class":35,"line":787},28,[33,789,399],{"class":374},[33,791,402],{"class":50},[33,793,343],{"class":43},[33,795,118],{"class":50},[33,797,592],{"class":43},[33,799,595],{"class":50},[33,801,803,805,807,809,811,813,815,817,819,821,823],{"class":35,"line":802},29,[33,804,601],{"class":374},[33,806,402],{"class":50},[33,808,343],{"class":43},[33,810,118],{"class":50},[33,812,511],{"class":43},[33,814,118],{"class":50},[33,816,538],{"class":87},[33,818,91],{"class":374},[33,820,543],{"class":530},[33,822,101],{"class":374},[33,824,595],{"class":50},[33,826,828,830],{"class":35,"line":827},30,[33,829,627],{"class":43},[33,831,595],{"class":50},[33,833,835,837,839],{"class":35,"line":834},31,[33,836,415],{"class":50},[33,838,101],{"class":374},[33,840,61],{"class":50},[33,842,844,846,848],{"class":35,"line":843},32,[33,845,425],{"class":50},[33,847,101],{"class":43},[33,849,61],{"class":50},[14,851,853],{"id":852},"handling-errors","Handling errors",[10,855,856],{},"In 2023, it's natural for consumers to use ad blockers, or for Google Analytics to be turned off for specific users for one reason or another. To best handle this situation, I encourage wrapping your gtag functions in a try\u002Fcatch so you aren't breaking your errors experience, or causing other code in your event listeners to fail. We've all been to those sites that have issues when ad blockers are turned on - don't be that site!",[22,858,860],{"className":24,"code":859,"filename":26,"language":27,"meta":28,"style":28},"\u002F\u002F Handle event in a safe function\nconst tryToSubmitEvent = (eventName, eventParams) => {\n  try {\n    gtag('event', eventName, eventParams);\n  } catch (e) {\n    \u002F\u002F Uncaught error. Google analytics couldn't be loaded on this page. Mostly due to cookie compliance or ad blockers.\n  }\n};\n\n\u002F\u002F Sent when playback completes.\nplayer.on('ended', (event) => {\n  const instance = event.detail.plyr;\n\n  tryToSubmitEvent('audio_ended', {\n    source: instance.source\n  });\n});\n\n\u002F\u002F Sent when playback is paused\nplayer.on('pause', (event) => {\n  const instance = event.detail.plyr;\n  const progress = ((instance.currentTime \u002F instance.duration) * 100).toFixed(0);\n\n  tryToSubmitEvent('audio_paused', {\n    source: instance.source,\n    current_time: instance.currentTime.toFixed(0),\n    progress,\n  });\n});\n\n\u002F\u002F Sent when playback starts playing\nplayer.on('play', (event) => {\n  const instance = event.detail.plyr;\n  const progress = ((instance.currentTime \u002F instance.duration) * 100).toFixed(0);\n\n  tryToSubmitEvent('audio_play', {\n    source: instance.source,\n    current_time: instance.currentTime.toFixed(0),\n    progress,\n  });\n});\n",[30,861,862,867,892,899,925,942,947,952,957,961,965,993,1013,1017,1034,1046,1054,1062,1066,1070,1098,1118,1162,1166,1182,1196,1220,1226,1234,1242,1246,1250,1278,1299,1344,1349,1366,1381,1406,1413,1422],{"__ignoreMap":28},[33,863,864],{"class":35,"line":36},[33,865,866],{"class":298},"\u002F\u002F Handle event in a safe function\n",[33,868,869,871,874,876,878,881,883,886,888,890],{"class":35,"line":64},[33,870,75],{"class":74},[33,872,873],{"class":43}," tryToSubmitEvent ",[33,875,81],{"class":50},[33,877,323],{"class":50},[33,879,880],{"class":326},"eventName",[33,882,320],{"class":50},[33,884,885],{"class":326}," eventParams",[33,887,101],{"class":50},[33,889,332],{"class":74},[33,891,335],{"class":50},[33,893,894,897],{"class":35,"line":71},[33,895,896],{"class":39},"  try",[33,898,335],{"class":50},[33,900,901,904,906,908,910,912,914,917,919,921,923],{"class":35,"line":363},[33,902,903],{"class":87},"    gtag",[33,905,91],{"class":374},[33,907,58],{"class":50},[33,909,327],{"class":54},[33,911,58],{"class":50},[33,913,320],{"class":50},[33,915,916],{"class":43}," eventName",[33,918,320],{"class":50},[33,920,885],{"class":43},[33,922,101],{"class":374},[33,924,61],{"class":50},[33,926,927,929,932,934,937,939],{"class":35,"line":368},[33,928,415],{"class":50},[33,930,931],{"class":39}," catch",[33,933,323],{"class":374},[33,935,936],{"class":43},"e",[33,938,524],{"class":374},[33,940,941],{"class":50},"{\n",[33,943,944],{"class":35,"line":396},[33,945,946],{"class":298},"    \u002F\u002F Uncaught error. Google analytics couldn't be loaded on this page. Mostly due to cookie compliance or ad blockers.\n",[33,948,949],{"class":35,"line":412},[33,950,951],{"class":50},"  }\n",[33,953,954],{"class":35,"line":422},[33,955,956],{"class":50},"};\n",[33,958,959],{"class":35,"line":432},[33,960,68],{"emptyLinePlaceholder":67},[33,962,963],{"class":35,"line":437},[33,964,299],{"class":298},[33,966,967,969,971,973,975,977,979,981,983,985,987,989,991],{"class":35,"line":443},[33,968,304],{"class":43},[33,970,118],{"class":50},[33,972,309],{"class":87},[33,974,91],{"class":43},[33,976,58],{"class":50},[33,978,215],{"class":54},[33,980,58],{"class":50},[33,982,320],{"class":50},[33,984,323],{"class":50},[33,986,327],{"class":326},[33,988,101],{"class":50},[33,990,332],{"class":74},[33,992,335],{"class":50},[33,994,995,997,999,1001,1003,1005,1007,1009,1011],{"class":35,"line":472},[33,996,340],{"class":74},[33,998,343],{"class":43},[33,1000,346],{"class":50},[33,1002,349],{"class":43},[33,1004,118],{"class":50},[33,1006,354],{"class":43},[33,1008,118],{"class":50},[33,1010,55],{"class":43},[33,1012,61],{"class":50},[33,1014,1015],{"class":35,"line":493},[33,1016,68],{"emptyLinePlaceholder":67},[33,1018,1019,1022,1024,1026,1028,1030,1032],{"class":35,"line":550},[33,1020,1021],{"class":87},"  tryToSubmitEvent",[33,1023,91],{"class":374},[33,1025,58],{"class":50},[33,1027,387],{"class":54},[33,1029,58],{"class":50},[33,1031,320],{"class":50},[33,1033,335],{"class":50},[33,1035,1036,1038,1040,1042,1044],{"class":35,"line":555},[33,1037,399],{"class":374},[33,1039,402],{"class":50},[33,1041,343],{"class":43},[33,1043,118],{"class":50},[33,1045,409],{"class":43},[33,1047,1048,1050,1052],{"class":35,"line":581},[33,1049,415],{"class":50},[33,1051,101],{"class":374},[33,1053,61],{"class":50},[33,1055,1056,1058,1060],{"class":35,"line":598},[33,1057,425],{"class":50},[33,1059,101],{"class":43},[33,1061,61],{"class":50},[33,1063,1064],{"class":35,"line":624},[33,1065,68],{"emptyLinePlaceholder":67},[33,1067,1068],{"class":35,"line":632},[33,1069,440],{"class":298},[33,1071,1072,1074,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094,1096],{"class":35,"line":641},[33,1073,304],{"class":43},[33,1075,118],{"class":50},[33,1077,309],{"class":87},[33,1079,91],{"class":43},[33,1081,58],{"class":50},[33,1083,167],{"class":54},[33,1085,58],{"class":50},[33,1087,320],{"class":50},[33,1089,323],{"class":50},[33,1091,327],{"class":326},[33,1093,101],{"class":50},[33,1095,332],{"class":74},[33,1097,335],{"class":50},[33,1099,1100,1102,1104,1106,1108,1110,1112,1114,1116],{"class":35,"line":650},[33,1101,340],{"class":74},[33,1103,343],{"class":43},[33,1105,346],{"class":50},[33,1107,349],{"class":43},[33,1109,118],{"class":50},[33,1111,354],{"class":43},[33,1113,118],{"class":50},[33,1115,55],{"class":43},[33,1117,61],{"class":50},[33,1119,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160],{"class":35,"line":655},[33,1121,340],{"class":74},[33,1123,498],{"class":43},[33,1125,346],{"class":50},[33,1127,503],{"class":374},[33,1129,506],{"class":43},[33,1131,118],{"class":50},[33,1133,511],{"class":43},[33,1135,514],{"class":50},[33,1137,343],{"class":43},[33,1139,118],{"class":50},[33,1141,521],{"class":43},[33,1143,524],{"class":374},[33,1145,527],{"class":50},[33,1147,531],{"class":530},[33,1149,101],{"class":374},[33,1151,118],{"class":50},[33,1153,538],{"class":87},[33,1155,91],{"class":374},[33,1157,543],{"class":530},[33,1159,101],{"class":374},[33,1161,61],{"class":50},[33,1163,1164],{"class":35,"line":661},[33,1165,68],{"emptyLinePlaceholder":67},[33,1167,1168,1170,1172,1174,1176,1178,1180],{"class":35,"line":690},[33,1169,1021],{"class":87},[33,1171,91],{"class":374},[33,1173,58],{"class":50},[33,1175,572],{"class":54},[33,1177,58],{"class":50},[33,1179,320],{"class":50},[33,1181,335],{"class":50},[33,1183,1184,1186,1188,1190,1192,1194],{"class":35,"line":711},[33,1185,399],{"class":374},[33,1187,402],{"class":50},[33,1189,343],{"class":43},[33,1191,118],{"class":50},[33,1193,592],{"class":43},[33,1195,595],{"class":50},[33,1197,1198,1200,1202,1204,1206,1208,1210,1212,1214,1216,1218],{"class":35,"line":756},[33,1199,601],{"class":374},[33,1201,402],{"class":50},[33,1203,343],{"class":43},[33,1205,118],{"class":50},[33,1207,511],{"class":43},[33,1209,118],{"class":50},[33,1211,538],{"class":87},[33,1213,91],{"class":374},[33,1215,543],{"class":530},[33,1217,101],{"class":374},[33,1219,595],{"class":50},[33,1221,1222,1224],{"class":35,"line":761},[33,1223,627],{"class":43},[33,1225,595],{"class":50},[33,1227,1228,1230,1232],{"class":35,"line":787},[33,1229,415],{"class":50},[33,1231,101],{"class":374},[33,1233,61],{"class":50},[33,1235,1236,1238,1240],{"class":35,"line":802},[33,1237,425],{"class":50},[33,1239,101],{"class":43},[33,1241,61],{"class":50},[33,1243,1244],{"class":35,"line":827},[33,1245,68],{"emptyLinePlaceholder":67},[33,1247,1248],{"class":35,"line":834},[33,1249,658],{"class":298},[33,1251,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274,1276],{"class":35,"line":843},[33,1253,304],{"class":43},[33,1255,118],{"class":50},[33,1257,309],{"class":87},[33,1259,91],{"class":43},[33,1261,58],{"class":50},[33,1263,159],{"class":54},[33,1265,58],{"class":50},[33,1267,320],{"class":50},[33,1269,323],{"class":50},[33,1271,327],{"class":326},[33,1273,101],{"class":50},[33,1275,332],{"class":74},[33,1277,335],{"class":50},[33,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297],{"class":35,"line":1280},33,[33,1282,340],{"class":74},[33,1284,343],{"class":43},[33,1286,346],{"class":50},[33,1288,349],{"class":43},[33,1290,118],{"class":50},[33,1292,354],{"class":43},[33,1294,118],{"class":50},[33,1296,55],{"class":43},[33,1298,61],{"class":50},[33,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318,1320,1322,1324,1326,1328,1330,1332,1334,1336,1338,1340,1342],{"class":35,"line":1301},34,[33,1303,340],{"class":74},[33,1305,498],{"class":43},[33,1307,346],{"class":50},[33,1309,503],{"class":374},[33,1311,506],{"class":43},[33,1313,118],{"class":50},[33,1315,511],{"class":43},[33,1317,514],{"class":50},[33,1319,343],{"class":43},[33,1321,118],{"class":50},[33,1323,521],{"class":43},[33,1325,524],{"class":374},[33,1327,527],{"class":50},[33,1329,531],{"class":530},[33,1331,101],{"class":374},[33,1333,118],{"class":50},[33,1335,538],{"class":87},[33,1337,91],{"class":374},[33,1339,543],{"class":530},[33,1341,101],{"class":374},[33,1343,61],{"class":50},[33,1345,1347],{"class":35,"line":1346},35,[33,1348,68],{"emptyLinePlaceholder":67},[33,1350,1352,1354,1356,1358,1360,1362,1364],{"class":35,"line":1351},36,[33,1353,1021],{"class":87},[33,1355,91],{"class":374},[33,1357,58],{"class":50},[33,1359,778],{"class":54},[33,1361,58],{"class":50},[33,1363,320],{"class":50},[33,1365,335],{"class":50},[33,1367,1369,1371,1373,1375,1377,1379],{"class":35,"line":1368},37,[33,1370,399],{"class":374},[33,1372,402],{"class":50},[33,1374,343],{"class":43},[33,1376,118],{"class":50},[33,1378,592],{"class":43},[33,1380,595],{"class":50},[33,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402,1404],{"class":35,"line":1383},38,[33,1385,601],{"class":374},[33,1387,402],{"class":50},[33,1389,343],{"class":43},[33,1391,118],{"class":50},[33,1393,511],{"class":43},[33,1395,118],{"class":50},[33,1397,538],{"class":87},[33,1399,91],{"class":374},[33,1401,543],{"class":530},[33,1403,101],{"class":374},[33,1405,595],{"class":50},[33,1407,1409,1411],{"class":35,"line":1408},39,[33,1410,627],{"class":43},[33,1412,595],{"class":50},[33,1414,1416,1418,1420],{"class":35,"line":1415},40,[33,1417,415],{"class":50},[33,1419,101],{"class":374},[33,1421,61],{"class":50},[33,1423,1425,1427,1429],{"class":35,"line":1424},41,[33,1426,425],{"class":50},[33,1428,101],{"class":43},[33,1430,61],{"class":50},[10,1432,1433,1434,1439],{},"That's it! You should now be able to see your events being recorded in the real time view in Google Analytics, or by turning on the debug mode for your Analytics script. If you do not have the GA Debug extension, then I highly recommend you ",[112,1435,1438],{"href":1436,"rel":1437},"https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fgoogle-analytics-debugger\u002Fjnkmfdileelhofjcijamephohjechhna",[116],"download it here"," to make your life a bit easier.",[1441,1442,1443],"style",{},"html pre.shiki code .sNZSE, html code.shiki .sNZSE{--shiki-default:#39ADB5;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sv0dM, html code.shiki .sv0dM{--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s4Nzc, html code.shiki .s4Nzc{--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .s9-rc, html code.shiki .s9-rc{--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sBv9x, html code.shiki .sBv9x{--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sp2xM, html code.shiki .sp2xM{--shiki-default:#6182B8;--shiki-dark:#82AAFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s742E, html code.shiki .s742E{--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .scQ8X, html code.shiki .scQ8X{--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbA4_, html code.shiki .sbA4_{--shiki-default:#E53935;--shiki-dark:#F07178}html pre.shiki code .sRqct, html code.shiki .sRqct{--shiki-default:#F76D47;--shiki-dark:#F78C6C}",{"title":28,"searchDepth":64,"depth":71,"links":1445},[1446,1447,1448],{"id":16,"depth":64,"text":17},{"id":106,"depth":64,"text":107},{"id":852,"depth":64,"text":853},[1450],"Javascript","2023-04-13","Learn how to tag Google Analytics events using the Plyr media player Javascript package.","md",null,{},"\u002Fblog\u002Fcapturing-media-events-with-plyr",{"title":5,"description":1452},{"loc":1456,"lastmod":1451},"blog\u002Fcapturing-media-events-with-plyr","iC6t9Dt-YfK46nWhtrgtQu3wwhXSEF8xBLIpEltmZQo",1785434453660]