Support » Plugin: Pixel Caffeine » Pixel does not work when eliminating Render blocking Javascript

  • Resolved andy Denton

    (@andyd1710)


    I am using WP Fastest Cache, my mobile speed is terrible and part of the problem is that there is render blocking javascript resources in my theme and on my plugins.

    However with WP Fastest cache when I turn on eliminate render blocking resources it moves all the javascript to the footer or body. The problem is this stops the facebook pixel from working because it is no longer in the header.

    I have been told by the developer of WP Fastest cache that you have to add data-wpfc-render=”false” to the script. This would stop the facebook pixel code from being moved to the footer and would allow the mobile speed to increase substantially.

    I have edited the Class-aepc-pixel-scripts.php file as below. I am currently testing this on my site.

    public static function pixel_init() {
    ?>
    <!– Facebook Pixel Code –>
    <script data-wpfc-render=”false” >
    <?php if ( PixelCaffeine()->is_debug_mode() ) : ?>
    var fbq_calls = [],
    fbq = function() {
    console.log( ‘fbq: ‘, arguments[0], arguments[1], arguments[2] );
    fbq_calls.push( arguments );
    };
    <?php elseif ( AEPC_Track::can_init_pixel() ) : ?>
    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
    n.push=n;n.loaded=!0;n.version=’2.0′;n.agent=’dvpixelcaffeinewordpress’;n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
    document,’script’,’https://connect.facebook.net/en_US/fbevents.js&#8217;);
    <?php endif; ?>

    var aepc_pixel = <?php echo wp_json_encode( self::pixel_init_arguments(), JSON_FORCE_OBJECT ) ?>,
    aepc_pixel_args = <?php echo wp_json_encode( self::pixel_advanced_parameters(), JSON_FORCE_OBJECT ) ?>,
    aepc_extend_args = function( args ) {
    if ( typeof args === ‘undefined’ ) {
    args = {};
    }

    for(var key in aepc_pixel_args)
    args[key] = aepc_pixel_args[key];

    return args;
    };

    // Extend args
    if ( ‘yes’ === aepc_pixel.enable_advanced_events ) {
    aepc_pixel_args.language = navigator.language;

    if ( document.referrer.indexOf( document.domain ) < 0 ) {
    aepc_pixel_args.referrer = document.referrer;
    }
    }

    <?php if ( AEPC_Track::can_init_pixel() ) : ?>
    fbq(‘init’, ‘<?php echo PixelCaffeine()->get_pixel_id() ?>’, aepc_pixel.user);

    <?php /* Trigger the event when delay is passed and where there are all fbq calls that need to wait */ ?>
    setTimeout( function() {
    fbq(‘track’, “PageView”, aepc_pixel_args);
    }, aepc_pixel.fire_delay * 1000 );
    <?php endif; ?>
    </script>
    <?php if ( ! PixelCaffeine()->is_debug_mode() && AEPC_Track::can_init_pixel() ) : ?>
    <noscript><img height=”1″ width=”1″ style=”display:none”
    src=”https://www.facebook.com/tr?id=&lt;?php echo esc_attr( PixelCaffeine()->get_pixel_id() ) ?>&ev=PageView&noscript=1″
    /></noscript>
    <?php endif; ?>
    <!– End Facebook Pixel Code –>
    <?php
    }

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Antonino Scarfì

    (@antoscarface)

    Hi,

    thanks for reporting this. I kindly ask you if you can make a new try. Could you please replace entire pixel_init() method with the following code?

    
    	public static function pixel_init() {
    		// Split in order to make fbq delayable through WP Rocket, if used
    		?>
    		<!-- Facebook Pixel Code -->
    		<script data-wpfc-render=”false”>
    			var aepc_pixel = <?php echo wp_json_encode( self::pixel_init_arguments() ) ?>,
    				aepc_pixel_args = <?php echo wp_json_encode( self::pixel_advanced_parameters() ) ?>,
    				aepc_extend_args = function( args ) {
    					if ( typeof args === 'undefined' ) {
    						args = {};
    					}
    
    					for(var key in aepc_pixel_args)
    						args[key] = aepc_pixel_args[key];
    
    					return args;
    				};
    
    			// Extend args
    			if ( 'yes' === aepc_pixel.enable_advanced_events ) {
    				aepc_pixel_args.userAgent = navigator.userAgent;
    				aepc_pixel_args.language = navigator.language;
    
    				if ( document.referrer.indexOf( document.domain ) < 0 ) {
    					aepc_pixel_args.referrer = document.referrer;
    				}
    			}
    		</script>
    		<script>
    			<?php if ( PixelCaffeine()->is_debug_mode() ) : ?>
    			var fbq_calls = [],
    				fbq = function() {
    					console.log( 'fbq: ', arguments[0], arguments[1], arguments[2] );
    					fbq_calls.push( arguments );
    				};
    			<?php elseif ( AEPC_Track::can_init_pixel() ) : ?>
    			!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    				n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
    				n.push=n;n.loaded=!0;n.version='2.0';n.agent='dvpixelcaffeinewordpress';n.queue=[];t=b.createElement(e);t.async=!0;
    				t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
    				document,'script','https://connect.facebook.net/en_US/fbevents.js');
    			<?php endif; ?>
    
    			<?php if ( AEPC_Track::can_init_pixel() ) : ?>
    			fbq('init', aepc_pixel.pixel_id, aepc_pixel.user);
    
    			<?php /* Trigger the event when delay is passed and where there are all fbq calls that need to wait */ ?>
    			setTimeout( function() {
    				fbq('track', "PageView", aepc_pixel_args);
    			}, aepc_pixel.fire_delay * 1000 );
    			<?php endif; ?>
    		</script>
    		<?php if ( ! PixelCaffeine()->is_debug_mode() && AEPC_Track::can_init_pixel() ) : ?>
    		<noscript><img height="1" width="1" style="display:none"
    		               src="https://www.facebook.com/tr?id=<?php echo esc_attr( PixelCaffeine()->get_pixel_id() ) ?>&ev=PageView&noscript=1"
    			/></noscript>
    		<?php endif; ?>
    		<!-- End Facebook Pixel Code -->
    		<?php
    	}
    

    Essentially, I splitted the script in two parts: the first one is with the only global JS var needed to Pixel Caffeine script; the second one is the pixel loading.

    In the first script I added that data-wpfc-render=”false” suggested by the plugin support, in order to avoid to move essential part for Pixel Caffeine, instead leave the ability to move the Facebook Pixel loading, which is the heavy part.

    After this try, could you also please try the same thing, but without that data-wpfc-render=”false” ?

    Let me know if it works for you.
    Thank you.

    andy Denton

    (@andyd1710)

    Hi Antonino,

    Sorry for the delay, I have been away.

    I have tried the above code and it appeared to work fine.

    I am getting advanced pixel tracking when I test the pixel and I seem to be getting more information than I was before.

    I am back to getting add cart, view content, check out, etc with the product ID and various other information including what the user is logged in as and their details.

    Sincerely,

    Andy

    Plugin Author Antonino Scarfì

    (@antoscarface)

    Thank you for the update! 🙂

    One note if you didn’t already do that: I released a new version last week which does not include the data-wpfc-render="false". Please make sure to re-apply the change if you will upgrade the version.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.