JS IIFE breaks YouTube Tracking

Question

I'm confused as to why putting my YouTube tracking code into an IIFE stops it working.

My understanding was that IIFEs run instantly, so why is there a difference between including a script with just bare js vs an IFEE?

Here's my plain JS, which works correctlly:

if ( 0 < ga_options.youtube.length ) {
    var tag = document.createElement( 'script' );
    tag.src = '//www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName( 'script' )[0];
    firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );

    function onYouTubeIframeAPIReady() {
        scroll_events.register_youtube_videos();
    }
}

However, when I wrap it in an IIFE, like below, it no longer works (no tracking events are fired). I am trying to use an IIFE as part of a restructuring of existing code into self-contained units.

Please could someone explain what I am doing wrong? I have considered scope and tried using var tag and var firstScriptTag outside of the IIFE, but still no success.

gaEventsVideoTracking = (function(){

    window.console.log( "why no youtube tracking?" );
        if ( 0 < ga_options.youtube.length ) {
            tag = document.createElement( 'script' );
            tag.src = '//www.youtube.com/iframe_api';
            firstScriptTag = document.getElementsByTagName( 'script' )[0];
            firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );

            function onYouTubeIframeAPIReady() {
                scroll_events.register_youtube_videos();
            }
        }
})();

I've a feeling `onYouTubeIframeAPIReady` wants to be on your global. So you could maybe do -> `window.onYouTubeIframeAPIReady = function () {}` instead. — Keith, Feb 28 '18 at 15:20
@Keith Indeed. [It really never should have worked before, though](https://stackoverflow.com/q/31861239/1048572). — Bergi, Feb 28 '18 at 15:33
You mean version 1, outside of the IIFE? The syntax error was due to pasting issues. — Robin Andrews, Feb 28 '18 at 15:35

score 1 · Accepted Answer · answered Feb 28 '18 at 15:32

1

The function onYouTubeIframeAPIReady gets called by the script loaded from YouTube's servers.

Since you are using a function declaration to define it, it is locally scoped to the IIFE. This means it is not a global and thus not available for YouTube's script to call.

You can explicitly make it a global.

Add var onYouTubeIframeAPIReady; at line one (outside the IIFE) and then put onYouTubeIframeAPIReady = in front of the function declaration to make it a function expression and assign it to the global variable.

answered Feb 28 '18 at 15:32

Quentin

914,110
126
1,211
1,335

Of course there's not really any reason to place the `onYouTubeIframeAPIReady` declaration inside the IIFE in the first place. – Bergi Feb 28 '18 at 15:34
@Bergi — Or use an IIFE at all since all the other variables created inside it are implicit globals. – Quentin Feb 28 '18 at 15:35

JS IIFE breaks YouTube Tracking

1 Answers1