מעקב אחרי סרטוני יוטיוב באמצעות גוגל תג מנג׳ר

שוקי מן

11 שנים ago

הפוסט הזה הוא תרגום של הפוסט המעולה של CardinalPath (בלוג מומלץ מאוד, אגב), שמסביר איך לעקוב אחרי סרטוני יוטיוב באמצעות גוגל תג מנג’ר.

** עריכה: גוגל הוסיפו אפשרות בילטאין לתג מנג’ר למעקב אחרי סרטונים. הרשמו לקורס האונליין שלי על גוגל תג מנג’ר ולמדו איך לבצע את זה בקלות

בגדול, כדי להתקין מעקב גוגל אנליטיקס אחרי אינטרקציות של המשתמש עם סרטוני יוטיוב באתר שלכם אתם צריכים לאפשר את ה-API של יוטיוב, ואת זה אתם עושים באמצעות הוספת enablejsapi=1 בסוף הקישור של הסרטון (אם יש לכם כבר סימן שאלה אחד אתם צריכים להוסיף & לפני ה-enablejsapi=1, ואם לא אז תוסיפו סימן שאלה. ככה משרשרים פרמטרים לקישורים).

[mc4wp_form id=”2160″]

מה יוצא בסוף?

בסוף תוכלו לראות בדוחות גוגל אנליטיקס שלכם את הפעולות: play, pause, וכמה אחוזים מהסרטון נצפו (0,25,50,100).

בגלל שאתם כאלה נחמדים הכנתי לכם דוח לדוגמא שאותו אפשר להוריד מכאן ולהתקין אותו ישירות בחשבון הגוגל אנליטיקס שלכם.

הפעולות הנדרשות

צרו את המקרו (macros) הבאים:

1. מקרו שבודק האם יוטיוב אכן מוצג בעמוד, ואם כן – מחזיר ערך true.

המקרו הוא מסוג Custom JavaScript, קראו לו Youtube is present (או כל שם אחד שתרצו) ובתוך תיבת הטקסט כתבו:

1 2	// Return "true" if there is at least one Youtube video on the page function () { for (var e = document.getElementsByTagName('iframe'), x = e.length; x--;) if (/youtube.com/embed/.test(e[x].src)) return true; return false; }

2. לאחר מכן צרו עוד מקרו מסוג Data Layer Variable שיחזיר את הפעולה שהגולש ביצע (play, pause ומשך הצפיה בסרטון) וקראו לו action.

3. לאחר מכן צרו עוד מקרו מסוג Data Layer Variable שיחזיר את ה-ID של הסרטון, וקראו לו video label.

צרו את הכללים (rules) הבאים:

4. הכלל הזה קורה אחרי שהעמוד נטען (gtm.dom) ובמידה שהמקרו הראשון שיצרנו (1) החזיר את הערך true (כלומר – יש סרטון יוטיוב בעמוד).

קראו לכלל הזה Youtube present כי הוא בסוף יפעיל את התג שניצור בסעיף 7:

5. עכשיו ניצור כלל נוסף, שיקרה בכל פעם שהאובייקט event מכיל את הערך youtube (וזה קורה בכל פעם שהמשתמש מבצע פעולה מסויימת, ואז התג שניצור בסעיף הבא ישלח את הערך youtube ל-event עם dataLayer.push).

קראו לתג הזה Youtube event כדי שנוכל להשתמש בו בתג שבסעיף 7:

עכשיו צרו את התגים (tags) הבאים:

6. תג מסוג Universal Analytics עם Track Type מסוג Event, ואחרי זה בCategory, Action, Label שימו event, dataLayer Action, dataLayer Event (בהתאמה).

ה-Firing Rule של התג הזה הוא הכלל שיצרנו בסעיף 5 – Youtube event (כלומר – משתמש ביצע אינטרקציה עם הסרטון).

7. לאחר מכן צרו תג נוסף מסוג Custom HTML Tag, ובו תכניסו את הקוד הבא:

&lt;script type="text/javascript"&gt;
// attach our YT listener once the API is loaded
function onYouTubeIframeAPIReady() {
    for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) {
        if (/youtube.com/embed/.test(e[x].src)) {
            new YT.Player(e[x], {
                events: {
                    onStateChange: onPlayerStateChange,
                    onError: onPlayerError
                }
            });
            YT.gtmLastAction = "p";
        }
    }
}

// listen for play/pause, other states such as rewind and end could also be added
// also report % played every second
function onPlayerStateChange(e) {
    e["data"] == YT.PlayerState.PLAYING &amp;&amp; setTimeout(onPlayerPercent, 1000, e["target"]);
    if (e["data"] == YT.PlayerState.PLAYING &amp;&amp; YT.gtmLastAction == "p") {
        dataLayer.push({
            event: "youtube",
            action: "play",
            label: e.target["getVideoUrl"]().match(/v=([^&amp;]+)/)[1]
        });
        YT.gtmLastAction = "";
    }
    if (e["data"] == YT.PlayerState.PAUSED) {
        dataLayer.push({
            event: "youtube",
            action: "pause",
            label: e.target["getVideoUrl"]().match(/v=([^&amp;]+)/)[1]
        });
        YT.gtmLastAction = "p";
    }
}

// catch all to report errors through the GTM data layer
// once the error is exposed to GTM, it can be tracked in UA as an event!
function onPlayerError(e) {
    dataLayer.push({
        event: "error",
        action: "GTM",
        label: "youtube:" + e["target"]["src"] + "-" + e["data"]
    })
}

// report the % played if it matches 0%, 25%, 50%, 75% or completed
function onPlayerPercent(e) {
    if (e["getPlayerState"]() == YT.PlayerState.PLAYING) {
        var t = e["getDuration"]() - e["getCurrentTime"]() &lt;= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e["getDuration"]() * 4) / 4).toFixed(2);         if (!e["lastP"] || t &gt; e["lastP"]) {
            e["lastP"] = t;
            dataLayer.push({
                event: "youtube",
                action: t * 100 + "%",
                label: e["getVideoUrl"]().match(/v=([^&amp;]+)/)[1]
            })
        }
        e["lastP"] != 1 &amp;&amp; setTimeout(onPlayerPercent, 1000, e);
    }
}

// load the Youtube JS api and get going
var j = document.createElement("script"),
    f = document.getElementsByTagName("script")[0];
j.src = "//www.youtube.com/iframe_api";
j.async = true;
f.parentNode.insertBefore(j, f);
&lt;/script&gt;

// attach our YT listener once the API is loaded

function onYouTubeIframeAPIReady() {

for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) {

if (/youtube.com/embed/.test(e[x].src)) {

new YT.Player(e[x], {

events: {

onStateChange: onPlayerStateChange,

onError: onPlayerError

}

});

YT.gtmLastAction = "p";

}

// listen for play/pause, other states such as rewind and end could also be added

// also report % played every second

function onPlayerStateChange(e) {

e["data"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e["target"]);

if (e["data"] == YT.PlayerState.PLAYING && YT.gtmLastAction == "p") {

dataLayer.push({

event: "youtube",

action: "play",

label: e.target["getVideoUrl"]().match(/v=([^&]+)/)[1]

});

YT.gtmLastAction = "";

}

if (e["data"] == YT.PlayerState.PAUSED) {

dataLayer.push({

event: "youtube",

action: "pause",

label: e.target["getVideoUrl"]().match(/v=([^&]+)/)[1]

});

YT.gtmLastAction = "p";

}

// catch all to report errors through the GTM data layer

// once the error is exposed to GTM, it can be tracked in UA as an event!

function onPlayerError(e) {

dataLayer.push({

event: "error",

action: "GTM",

label: "youtube:" + e["target"]["src"] + "-" + e["data"]

})

}

// report the % played if it matches 0%, 25%, 50%, 75% or completed

function onPlayerPercent(e) {

if (e["getPlayerState"]() == YT.PlayerState.PLAYING) {

var t = e["getDuration"]() - e["getCurrentTime"]() <= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e["getDuration"]() * 4) / 4).toFixed(2); if (!e["lastP"] || t > e["lastP"]) {

e["lastP"] = t;

dataLayer.push({

event: "youtube",

action: t * 100 + "%",

label: e["getVideoUrl"]().match(/v=([^&]+)/)[1]

})

}

e["lastP"] != 1 && setTimeout(onPlayerPercent, 1000, e);

}

// load the Youtube JS api and get going

var j = document.createElement("script"),

f = document.getElementsByTagName("script")[0];

j.src = "//www.youtube.com/iframe_api";

j.async = true;

f.parentNode.insertBefore(j, f);

</script>

ה-Firing Rule של התג הזה הוא הכלל שיצרנו בסעיף 4 – Youtube present.

זהו! סיימתם.

בואו נראה איך זה עובד:

בכל פעם שכלל 4 מתקיים (העמוד גומר להטען והמקרו (1) מחזיר true) – גוגל תג מנג׳ר יורה את התג (7).

התג הזה מאזין לאינטרקציות שהגולש מבצע עם הסרטון, וכאשר הוא מזהה שהתבצעה אינטרקציה כלשהיא הוא דוחף את הערך youtube ל-event.

כאשר גוגל תג מנג׳ר מזהה ש-event contains youtube (כלל מספר 5) הוא מפעיל את התג של ה-Analytics Event (מס׳ 6) ששולח איוונט לגוגל אנליטיקס עם הערך youtube ב-category (שזה בעצם הערך של האובייקט event באותו רגע), הפעולה שהגולש ביצע ב-action (בעזרת dataLayer action שיצרנו בסעיף 2) ואת המספר המזהה של הסרטון בתוך ה-label (בעזרת dataLayer action שיצרנו בסעיף 3).

מכיוון שה-API של יוטיוב מחזיר רק את המזהה של הסרטון ולא את הכותרת שלו, אתם יכולים אחר כך להשתמש ב-Dimension Widening ולהפוך את המספרים המזהים הללו לשמות שאפשר להבין אותם.

עד כאן להיום. שוב תודה ל-CardinalPath ואתם מוזמנים להרשם לרשימת התפוצה שלי ולקבל עוד פוסטים מעולים על גוגל אדוורדס, גוגל אנליטיקס וגוגל תג מנג׳ר.