Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Painless 3rd party marketing scripts in WordPress
<?php
// Enqueue all js codes combined in a single file.
function enqueue_theme_assets()
{
wp_enqueue_script(
'trackers',
get_stylesheet_directory_uri() . '/js/trackers.js',
null,
null,
true
);
}
add_action( 'wp_enqueue_scripts', 'enqueue_theme_assets' );
// Defer this script.
function add_defer_attribute( $tag, $handle )
{
if ( is_admin() ) {
return $tag;
}
// Script handles to defer
$defer_handles = [
'trackers',
];
if ( in_array( $handle, $defer_handles, true ) ) {
return str_replace( ' src', ' defer="defer" src', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );
// Preconnect all external URLs that will be requested from that scripts.
function resource_hints( $hints, $relation_type )
{
if ($relation_type === 'preconnect') {
$hints[] = '//www.googletagmanager.com';
$hints[] = '//www.google-analytics.com';
$hints[] = '//www.gstatic.com';
}
return $hints;
}
add_filter( 'wp_resource_hints', 'resource_hints', 10, 2 );
var fired = false;
window.addEventListener('scroll', () => {
if (fired === false) {
fired = true;
setTimeout(() => {
// Google Tag Manager
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'YOUR_PROPERY_ID');
}, 1000)
} // endif
});
@ihorvorotnov

This comment has been minimized.

Copy link
Owner Author

@ihorvorotnov ihorvorotnov commented Aug 18, 2020

The scroll event works for both desktop/traditional and mobile/touch devices, although fired a bit differently and will work most of the time.

However, if you're concerned about some users not scrolling through the page ever, you can also listen to mousemove/touchmove event. In this case I'd also adjust the timeout to a shorter value – otherwise if a user moves a mouse to some link in main menu and clicks on it navigating away from the page, your trackers won't load. But that opens up quite a rabbit hole - some users won't be captured anyway. It's up to you to decide what percentage of non-captured views you can tolerate. Do some tests.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment