0

does anyone here have any idea how to set up Site Tracking by passing a contact's email address into Javascript Code?

I am on Wordpress using the visual builder Elementor's native contact form.

Here's the contact form: https://www.bestseo.sg/free-report/ (Bottom of the page)

I have already inserted ActiveCampaign's site tracking code sitewide.

However, it does not seem to start site tracking even after the form submission.

According to ActiveCampaign's documentation(https://help.activecampaign.com/hc/en-us/articles/221542267-An-overview-of-Site-Tracking#how-to-pass-a-contact-s-email-address-into-javascript-code), I believe I have to add this line of code:

vgo('setEmail', 'Email_Address_Goes_Here');

above

vgo('process');

But I have no idea what to replace 'Email_Address_Goes_Here' with, in order to call the actual contact's email after form submission.

Any help would be much appreciated!

Thank you.

Jim Ng
  • 91
  • 1
  • 4
  • 15
  • 1
    The email field is named `form_fields[email]`, so you should find the value in `$_POST['form_fields']['email']` after the form was submitted. – CBroe Apr 02 '20 at 09:18
  • Hi CBroe, I apologize as I'm not good at coding myself. Does that mean that I have to replace `'Email_Address_Goes_Here'` with `$_POST['form_fields']['email']`? – Jim Ng Apr 02 '20 at 09:35
  • I notice that `$_POST['form_fields']['email']` is in PHP whereas I require the code to be in Javascript for site tracking. Is there any way I can dynamically convert the code into Javascript for the code to work? Thank you @CBroe – Jim Ng Apr 02 '20 at 09:45
  • 1
    Client-side JavaScript has no access to POST parameters. You will need to create that specific bit of your JS code dynamically using PHP then. Or output the email address somewhere in your HTML code using PHP, like as a custom data attribute on some specific element, so that your JS code can then read it from there. – CBroe Apr 02 '20 at 09:47
  • Hi CBroe, thanks for replying. Do you have any good references or guides on where I can find the specific code on how to do that? – Jim Ng Apr 02 '20 at 09:52
  • Where is that line `vgo('process');` placed right now, where you want to add the line for the email to? Is it inline JavaScript, part of an external JavaScript resource, …? How _exactly_ does it get added to the page? – CBroe Apr 02 '20 at 10:11
  • @CBroe `vgo('process')` is actually placed in the footer of every web page, right before the end of the `

    ` tag. `vgo('setEmail', 'Email_Address_Goes_Here');` should be right above it. It's inline JavaScript. It gets added to the page because it's in the footer of every page, right before the `` tag

     – Jim Ng Apr 02 '20 at 10:22
  • How exactly is it placed into the footer? As static code, inside the theme’s `footer.php`? Or added via WP’s mechanisms such as wp_enqueue_script or similar? – CBroe Apr 02 '20 at 10:30
  • Hi @CBroe I added it via a plugin called Header and Footer Scripts, which is very similar to adding it in footer.php file – Jim Ng Apr 02 '20 at 12:49
  • Description of that plugins explicitly states, _“What it does not offer: You can’t insert/execute PHP codes.”_ - but you will need to execute a bit of PHP code here _somewhere_, otherwise you won’t be able to access any POST data. Plus, having that `vgo('setEmail', …)` call on _every_ page would probably not make much sense either; this plugin allows you to place code only on specific pages only inside `` though, according to description. – CBroe Apr 02 '20 at 12:54
  • @CBroe, I can still manually add it in the footer.php file outside of the plugin if that's required. What are your recommendations? I can still add code outside of the plugin by accessing the theme file directly – Jim Ng Apr 02 '20 at 12:57
  • I added an answer, that should relatively easy integrate into what you already have. Give it a try, and let me know if it worked. – CBroe Apr 02 '20 at 13:15

2 Answers2

0

So the plugin used to insert these JavaScript codes is https://wordpress.org/plugins/header-and-footer-scripts/ - I’d suggest to maybe just keep using that, and keep the scripts in the footer, so that this does not require too much modication.

Inside your template, you have to output the email addresse somewhere, where the JS can read it from - via a custom data attribute added to the body element for example.

The header.php of your theme should contain something similar to

<body <?php body_class(); ?>>

Modify that, to add a custom data attribute to store the email address entered in the from:

<body <?php body_class(); ?> data-freereportemail="<?php echo !empty($_POST['form_fields']['email']) ? esc_attr($_POST['form_fields']['email']) : ''; ?>">

If the POST parameter by that name is set, then it will be output as content of this attribute, otherwise it’ll simply stay empty.

Then modify the JavaScript code you insert via the plugin like this,

var freereportemail = $('body').attr('data-freereportemail');
if( freereportemail  != '' ) {
  vgo( 'setEmail', freereportemail );
}

This assumes that jQuery has already been loaded at this point, but I think that should most likely be the case.

If the attribute contained an email address, then this will execute the vgo tracker function, if the attribute value is empty, then it will simply skip this call.

This is not the most sophisticated approach, but it should do.

(Only if you had other forms on the site as well, that use a form field of that exact same name, you might be tracking more than intended. In that case, you’d need to find some additional criterion, to be able to differentiate between these different forms.)

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • Unfortunately, this still does not work. I really appreciate your time and effort into coming up with the code though. Do you have any recommendations on how to debug the process further to find out where the error lies? – Jim Ng Apr 02 '20 at 14:24
  • Check if the e-mail-address made it into the output, that the `data-freereportemail` is set on the `body` element. Check the browser console for JS errors. Add a console.log to check if it successfully reads it with `$('body').attr('data-freereportemail')`. – CBroe Apr 03 '20 at 06:59
0

A person at the AC support gave me thsi code :

jQuery('form').submit(function() {
var userEmail = jQuery("form input[type='email']").val();
vgo('setEmail', userEmail);
vgo('process');
});

I hope it'll help you.

I use FluentForms, so i just went on the form specific Custom JS/CSS to apply it (so i had no problems of proper targeting...)

Wilfried
  • 1
  • 1