Capture data from page and pass to LeadsHook


#21

Hi Wynne,

Thank you very much for confirming. We will try to replicate this in our dev environment and get back to you as soon as possible.

Hamza


#22

Hi Hamza,

I’ve been checking over my work.

I have finally managed to retrieve the sessionId value.

It was my fault - there was an typo in part of my Javascript. Sorry for getting you to look at this, unnecessarily.

My next challenge is to somehow attach the sessionId variable, to the outgoing webhook POST request.

Wynne


#23

Hi @Wynne_Pirini,

I had a quick look and
the code is throwing an error on the first node.

Will follow this up with one of our frontend devs soon.

Nik


#24

Hi Nik,

It was a typo on my end. One too many “)” - made the error.

Sorry about that.

I’m now trying to figure out how to insert the sessionId into the json payload.

I’ve retrieved the variable from dataLayer, and stored the value in a var:

Preformatted textvar LHsessionId = dataLayer[3].autopilotSessionId;

I read one article that said


#25

You want to use the payload in a call from Tracking part of the Node or fire a call from GTM?


#26

I want to insert a variable, containing the sessionId value, into a LH webhook node.

Here’s a video showing what I mean:
CloudApp


#27

Hi @Wynne_Pirini,

{LHsessionid} will look for a custom field. I don’t see a custom field created called LHsessionid. This is probably why there is no value being passed.

  1. Create custom field called LHsessionid

  2. Save the session var into a custom field, LHsessionid.

  3. Then the webhook will do its thing.

Being redundant here: Add {LHsessionid} on any node prior to the webhook to confirm the custom field has the value.


#28

How do you save the session var into the custom field?


#29

Hi @Wynne_Pirini,

If you look at chatlines, where you can ask users to input their name, you’ll see the code looks like this…

<input name="first_name" class="form-control ng-pristine ng-untouched ng-scope ng-empty ng-invalid ng-invalid-required" size="25" required="required" ng-model="inputs.first_name" ng-model-options="{debounce: 500}" placeholder="First Name">

ng-model=“inputs.LHsessionid”

This is the directive to store values into custom fields (we use AngularJS).

More here: https://www.w3schools.com/angular/angular_model.asp

Give this shot and see if it works.


#30

Hi,

I gave it a shot, but wasn’t able to display the sessionId on a test a page.

Here’s a video showing what I did:
CloudApp

I created a script to fire when the first node is exited, which

  • retrieves sessionId from datalayer, and assigns the value to a variable.
  • creates a new input and appends to form.

Here’s the javascript:

<script>
    // pull sessionId from datalayer
    var LHsessionId = dataLayer[3].autopilotSessionId;

    // create input and define properties & values
    var sessionIdInput = document.createElement("input");
    //sessionIdInput.setAttribute("type", "hidden");
    sessionIdInput.setAttribute("ng-model", "inputs.session_id");
    sessionIdInput.setAttribute("value", LHsessionId);

    // find first form element and append new input
    var forms = document.forms;
    forms[0].append(sessionIdInput);

    // test
    alert('sessionId is ' + LHsessionId);
</script>

Cheers,
Wynne


#31

Wynne, haven’t forgotten you. :slight_smile:

Just waiting for one of devs in EU time zone to get online. I’ll get him to review this.


#32

Thanks Nik :slight_smile:


#33

Hi Wynne,

We had created this code for dates etc some time ago. Works perfectly.

This might give you a clue on how to set the date into a custom field which is what we’re doing below.


#34

Hi Nik,

Thanks for the example…

From the example date script, I don’t see how the data is saved to LeadsHook - so, the angular variable can be accessed in the workflow, later

Wynne


#35

I feel lost when dealing with Angular. There’s a ton I don’t know.

I don’t need LeadsHook to know what data I’m trying to POST out to a webhook.

From what I can tell, I think I have to get data into Angular. Then be able to access it again, later in the decision tree.


#36

I solved it.

I just accessed “quiz”, object in javascript, with it’s array of fields. Then updated the value of the appropriate field using javascript.

Here’s a video showing how to do it:
CloudApp

Here’s the javascript:

<script>

	// retrieve sessionId from dataLayer
	var LHsessionId;
	for (var h = 0; h < dataLayer.length; h++) {
		if (dataLayer[h].autopilotSessionId) {
			LHsessionId = dataLayer[h].autopilotSessionId;
                    break;
		}
	}
	
	// create array of available input fields
	var inputArray = quiz.fields;

	// find index of session_id
	var fieldIndex;
	for (var i = 0; i < inputArray.length; i++) {
		if (inputArray[i].name === "session_id") {
			fieldIndex = i;
			break;
		}
	}

	// set value of session_id field
	inputArray[fieldIndex].value=LHsessionId;
	
</script>

Cheers,
Wynne


#37

@Wynne_Pirini, Awesome. :slight_smile:

Kudos to you. Now you know GTM, Angular and DataLayer :slight_smile:

If you need me to review any of your DTs then please don’t hesitate to send an email to support. Your persistence to resolve this challenge is rare. Full review. Ads, lander and another else you want.

Nik


#38

Awesome, thanks Nik :slight_smile:

And many thanks for the offer to look over some of my work!

Cheers,
Wynne