partytown icon indicating copy to clipboard operation
partytown copied to clipboard

[πŸ“–] Integration guide for Wordpress

Open SpyrosBou opened this issue 1 year ago β€’ 7 comments

Suggestion

Hey all,

I've been trying to set partytown up for a wordpress website and realised there's no documentation on how that should work. I've been coming across a bunch of issues as a result. Would be really nice if there was a WP section so I could know I'm on the right path - so I thought I'd drop a suggestion.

Thanks!

SpyrosBou avatar Dec 02 '24 16:12 SpyrosBou

Hi, I have no experience with WP, I'm sorry. You can drop your questions here. If you find a way to use it, feel free to drop a PR.

gioboa avatar Dec 02 '24 17:12 gioboa

Hey there,

Happy New Year and thanks for the reply. I'll type out what I've done so far and the questions I'm having.

So I went with the basic html-type integration. Essentially I added the code to the header.php file of my custom theme. Here's what that currently looks like:

<script>
	partytown = {
		forward: ["dataLayer.push"],
		debug: true,
		logCalls: true,  // This probably isn't right
	};
</script>

<script>/* Partytown 0.11.0 - MIT QwikDev */
	**Pasted entire contents of partytown.js** 
</script>

Then did

The partytown files are located in the root directory of my website as below: image image

I'm currently getting a successful call to partytown-sw.js and the thread worker seems registered and active: image image

But as you can see I'm also getting a 404 for the .html file. Another issue is I'm not getting verbose logging in my console tab at all. I am not sure exactly how to enable the logging to begin with - I couldn't find a clear explanation in the docs for this.

I am not certain whether I'm loading the partytown script correctly either. I've tried pasting the partytown-snippet.js code instead, same end result.

If anyone can offer any help or point out any mistakes I'm making I'd really appreciate it.

SpyrosBou avatar Jan 02 '25 16:01 SpyrosBou

Thanks for the update. From this issue #629 I can see that @westonruter is trying to do a similar thing. :eyes:

gioboa avatar Jan 03 '25 02:01 gioboa

I think the issue in that thread is a bit more advanced than what I'm trying to do here. I'm trying to set up a basic integration, #629 is dealing with the woocommerce plugin. That said I think @westonruter has successfully dealt with the basic integration before moving onto connecting it with WooCommerce so perhaps he could help me out

SpyrosBou avatar Jan 03 '25 11:01 SpyrosBou

I've put together a basic integration in the Web Worker Offloading plugin. Using that plugin, you can easily opt-in a script to be offloaded to Partytown via this PHP code:

wp_script_add_data( $script_handle, 'worker', true );

The plugin also has built-in integrations with a few popular plugins for offloading gtag to Partytown.

westonruter avatar Jan 03 '25 17:01 westonruter

I’ve created a plugin called "Partytown" for WordPress and you’re welcome to use it. github

tamimhasandev avatar Jan 25 '25 09:01 tamimhasandev

Been trying to use partytown 0.11.2 with GT-* because that's what the SiteKit plugin was using, but have had no success. The partytown.js loads under Network tab, and the google tag url resolves successfully. No JS errors. However, none of the impressions seem to be recorded. I thought there would be a number of partytown-related Service Workers loaded, too, but there's nothing. Using partytown with Sage v11 theme.

<head>
@php($partytown_lib_url = get_template_directory_uri() . '/public/build/~partytown/')

@php($worker_url_root = get_template_directory_uri() . '/') 

  <script>
    partytown = {
      "forward": ["dataLayer.push"], 
      "lib": "<?= $worker_url_root ?>",
      "debug": true,
      "scope": "/" ,
      
    };
  
  </script>

  <script src="<?= $partytown_lib_url . 'partytown.js' ?>"></script> 


<script
  type="text/partytown"
  src="https://www.googletagmanager.com/gtag/js?id=GT-xxx"
></script>


<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  window.gtag = function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
 
  gtag('config', 'GT-xxx', { 'debug_mode': true });
</script>
</head>

djmtype avatar Oct 10 '25 23:10 djmtype