jQuery error on Custom Javascript variable in Google tag manager

Question

Why am I getting an error when I run a jquery as a Custom javasript variable? The error description is "Error at line 10, character 2: Parse error. ')' expected"

function(){
  $( document ).ready(function() {
    $('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
       var $label = $( this ).parent().find("h2").text();
       return $label;
    });

  });
};

Please advise.

Regards,

Sree

That code, as quoted, has a syntax error: You can't have a function *declaration* with no name. In the position you've quoted it, `function` starts a function declaration. If there's more context, please show it -- at least enough that the code doesn't cause a syntax error just on its own. If this **is** what your code is, that's your answer. More [here](https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname) and [here](https://stackoverflow.com/questions/32155277/function-declaration-vs-function-expression). — T.J. Crowder, Aug 11 '17 at 07:51

score 0 · Answer 1 · answered Aug 11 '17 at 08:31

0

Remove the last semicolon ; on the last line:

function(){
$( document ).ready(function() {
$('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
 var $label = $( this ).parent().find("h2").text();
return $label;
});

});
}

answered Aug 11 '17 at 08:31

Dmitry Sulman

116
7

score 0 · Answer 2 · answered Aug 11 '17 at 08:52

I think you did some conceptual mistake, when you working with GTM. Custom variable should return some value when trigger is fired.

I think your initial goal in GTM is:

Send some tag (to Universal analytics or something else) when user clicks on button button[class="panel__link panel__link--btb"]. This tag should contain some text information, which you can find like that .parent().find("h2").text();

If i am correct, then you should do the following:

Go to Variables. Built-in variables-> Configure-> Enable Click Element
Go to Triggers -> New -> Type: All Elements -> Click Element:matches CSS selector:button.panel__link.panel__link--btb
Go to Variables. New -> Custom JavaScript: function(){return {{Click Element}}.parent().find("h2").text();} -> Name: 'H2 text'
Go to Tags. New -> Assign trigger from step #2. -> Type: (you can choose what you need) -> And here you can use your variable {{H2 text}}, it will return necessary text

score -1 · Answer 3 · answered Aug 11 '17 at 07:56

The error is caused because there no name for the function. I think you are trying to do a Self Invoking function which should be

(function(){
   //your code
}());

Your code should be,

(function(){
  $( document ).ready(function() {
    $('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
      var $label = $( this ).parent().find("h2").text();
      return $label;
    });

  });
}());

Or

Remove the function() {} and simply execute the code with .ready

$( document ).ready(function() {
    $('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
      var $label = $( this ).parent().find("h2").text();
      return $label;
    });

});

jQuery error on Custom Javascript variable in Google tag manager

3 Answers3