0

I'm attempting to install GTM (Google Tag Manager) on a WordPress site, but I'm running into issues. Since GTM is placed in the <head>, it requires JQuery to be defined before the GTM script is loaded. Gravity Forms is used throughout my website, but it defines JQuery in the <footer>. So, I really have two questions:

  1. What's the proper way to define JQuery on a global scale?
  2. If I define JQuery on a global scale, do I need Gravity Forms to define JQuery as well? Would that cause there to be two declarations of JQuery on pages that include Gravity Forms? From what I understand, it's problematic to have two declarations of JQuery. If it is an issue, how would I prevent Gravity Forms from rendering JQuery scrips?
3
  • 1
    If you enqueue the GTM code in the same way as any JavaScript, specifying jQuery as a dependency then WP will just sort it all out for you. – Andy Macaulay-Brook Mar 29 '17 at 19:11
  • Is there good documentation somewhere that explains the process? I mostly with with Drupal, so my experience with WP is very limited. @AndyMacaulay-Brook – Kellen Mar 29 '17 at 19:18
  • There are plenty of answers on this site that might guide you to a solution for your specific question. If you search on 'enqueue' you should find something useful. – Andy Macaulay-Brook Mar 29 '17 at 19:22
1

A bit of context:

Gravity Forms itself does not contain and does not add jQuery to the site. jQuery is included with WordPress and when it is needed by a plugin or a theme, you simply tell WP that jQuery is needed on the page and it will take care of making it available.

Because of this, there is not a problem with adding it several times. It can be requested in multiple places (such as by multiple functions or plugins) but WP knows to add it only once on the page.

Regarding your specific use case:

When you are installing Google Tag Manager, are you placing a script in the head of the page using wp_enqueue_script? If so, as @Andy already mentioned in the above comment, when you enqueue the script, you can specify jQuery as a dependency for that script and WP will take care of making it available on the page before your script needs it:

function my_theme_add_gtm_script() {
    wp_enqueue_script('google-track-manager', get_template_directory_uri() . '/assets/js/gtm.js', array('jquery'), false, false);
}
add_action('wp_enqueue_scripts', 'my_theme_add_gtm_script');

You can see more information about the script enqueue function on the Code Reference page: wp_enqueue_script. You can also see example implementation codes there, at the bottom of the page, in the Notes section.

The dependency is specified as the 3rd parameter and is an array containing a list of script handle names that your script is dependent upon. You can specify jQuery as a dependency by entering array('jquery').

The 5th parameter specifies if your script should be added in the page footer (before the closing of the </body> tag). By default, this parameter is false and the script is added in the head but I have included it for clarity.

The file src is specified as the 2nd parameter and you can build that depending on your specific needs (if you are calling this from a theme, from a plugin, your folder structure, etc). I have entered an example src for a theme.

Alternative option:

If you are not using wp_enqueue_script and cannot specify jQuery as a dependency, but still want to tell WP to include jQuery in the head:

(By default, jQuery is added in the <head> but a plugin might have changed that default behavior and requested it in the footer.)

The following thread discusses a few techniques about how to change the location of jQuery through code. It talks about how to change it to the footer but the same ideas apply about changing it to the head as well: Enqueue core jQuery in the footer?

1
  • Thanks for your help! Once I enqueued gtm as a script, while declaring JQuery as a dependency, I got it working perfectly. I'm used to working in Drupal, so your explanation was very helpful. – Kellen Mar 30 '17 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.