ga4-documentation-administration-solution/Setup/Google-Sheet/Apps-Script/13_Add-Edit-Parameters.html at main · Knowit-Experience-MarTech/ga4-documentation-administration-solution · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Select Parameters</title>
<style>
html, body{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
}
h1{
  font-size: 1.2em;
  margin: 5px 0 5px 0;
}
.btn{
  font-weight: bold;
  font-size: 1.1em;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #000000;
  color:#ffffff;
}
.btn:hover{
  cursor: pointer;
}
.fill{
  background:#228B22;
}
.fill:hover {
  background:#2db92d;
}
.fill:active, .active {
  background:#5bd75b;
  color: #000000;
}
.get{
  background:#3545A7;
}
.get:hover {
  background:#6472ce;
}
.get:active, .get:focus {
  background:#9ea7e0;
}
.btn:nth-child(1) {
  margin-right: 8px;
}
#search{
  width: 95%;
  font-size: 1.1em;
  padding: 3px;
}
input {
  vertical-align: -3px;
}
.info{
  font-size: 1.2em;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Parameter search
  $("#search").keyup(function(){
    const filter = $("#search").val().toLowerCase();
    const checkbox = $("input[type='checkbox']");
    const span = $("span");
    for (let i = 0; i < checkbox.length; i++) {
      txtValue = checkbox[i].value.toLowerCase();
        if (txtValue && txtValue.indexOf(filter) === -1) {
          span[i].style.display = "none";
        } else {
          span[i].style.display = "";
        }
    }
  });
});
function runFillCell(button) {
  button.classList.add('active');

  // Call the server-side function
  google.script.run.withSuccessHandler(function() {
    // Remove the class when the script finishes
    button.classList.remove('active');
  }).fillCell(button.parentNode);
}
</script>
</head>
<body>
<div>
<h1>Select Parameters</h1>
<form id="form" name="form">
<input type="button" class="btn fill" value="Fill Current Cell" onclick="runFillCell(this)" />
<input type="button" class="btn get" value="Get Parameters from Cell" onclick="google.script.run.showDialog()" />
<br />
<br />
<?
if(Object.prototype.toString.call(parameters) === '[object Array]') { ?>
  <input type="text" id="search" placeholder="Search for parameter.." title="Type in a parameter" />
  <br />
  <br />
<?
}
?>
<? if (Object.prototype.toString.call(parameters) === '[object Array]') { ?>
  <? if (arr1.length > 0) { ?>
    <? for (let i = 0; i < arr1.length; i++) { ?>
      <? let arrData = arr1[i]; ?>
      <span>
        <input type="checkbox" value="<?= arrData ?>" name="ch<?= arrData ?>" id="ch<?= arrData ?>" <? if (inArray(arrData, arr2)) { ?>checked<? } ?>>
        <label for="ch<?= arrData ?>"><?= arrData ?></label><br />
      </span>
    <? } ?>
  <? } else { ?>
    <p class="info">No parameters available.</p>
  <? } ?>
<? } else { ?>
  <p class="info">Select a <strong>Cell</strong> in either the column <strong>Event Parameters</strong>, <strong>Item Parameters</strong> or <strong>User Parameters</strong>.</p>
<? } ?>
<br>
<input type="button" class="btn fill" value="Fill Current Cell" onclick="runFillCell(this)" />
<input type="button" class="btn get" value="Get Parameters from Cell" onclick="google.script.run.showDialog()" />
</form>
</div>
</body>
</html>