您好，我正在尝试在制表符中使用来自谷歌标签管理器的数据。我已经将对象拉入并可以通过查看控制台来验证这一点，但我不知道如何将它们带入制表器，就像我通常使用 Ajax 调用一样。
有谁知道怎么做？
<head>
<title>SDR</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Description" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Latest compiled CSS JQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Latest compiled JavaScript JQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.4.5/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.4.5/js/tabulator.min.js"></script>
<!-- Custom CSS -->
<style>
.container-fluid h1 {
text-align:center !important;
}
.tabulator-row:hover {
background:#005DAB !important;
color:white !important;
}
img {
margin: 10px 0px 0px 10px;
}
h2 {
padding:25px !important;
}
</style>
<script>
var GoogleAuth;
var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
function handleClientLoad() {
// Load the API's client and auth2 modules.
// Call the initClient function after the modules load.
gapi.load('client:auth2', initClient);
}
function initClient() {
// Retrieve the discovery document for version 3 of Google Drive API.
// In practice, your app can retrieve one or more discovery documents.
var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
// Initialize the gapi.client object, which app uses to make API requests.
// Get API key and client ID from API Console.
// 'scope' field specifies space-delimited list of access scopes.
gapi.client.init({
'apiKey': 'HIDDENONPURPOSE',
'discoveryDocs': [discoveryUrl],
'clientId': 'HIDDENONPURPOSE.apps.googleusercontent.com',
'scope': SCOPE
}).then(function () {
GoogleAuth = gapi.auth2.getAuthInstance();
// Listen for sign-in state changes.
GoogleAuth.isSignedIn.listen(updateSigninStatus);
// Handle initial sign-in state. (Determine if user is already signed in.)
var user = GoogleAuth.currentUser.get();
setSigninStatus();
// Call handleAuthClick function when user clicks on
// "Sign In/Authorize" button.
$('#sign-in-or-out-button').click(function() {
handleAuthClick();
});
$('#revoke-access-button').click(function() {
revokeAccess();
});
});
}
function handleAuthClick() {
if (GoogleAuth.isSignedIn.get()) {
// User is authorized and has clicked 'Sign out' button.
GoogleAuth.signOut();
} else {
// User is not signed in. Start Google auth flow.
GoogleAuth.signIn();
}
}
function revokeAccess() {
GoogleAuth.disconnect();
}
function setSigninStatus(isSignedIn) {
var user = GoogleAuth.currentUser.get();
var isAuthorized = user.hasGrantedScopes(SCOPE);
if (isAuthorized) {
$('#sign-in-or-out-button').html('Sign out');
$('#revoke-access-button').css('display', 'inline-block');
$('#auth-status').html('You are currently signed in and have granted ' +
'access to this app.');
var NEW_SCOPES = 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/tagmanager.readonly';
user.grant({'scope': NEW_SCOPES});
// Example 2: Use gapi.client.request(args) function
var request = gapi.client.request({
'method': 'GET',
'path': '/tagmanager/v1/accounts/HIDDENONPURPOSE/containers/HIDDENONPURPOSE/tags',
});
// Execute the API request.
request.execute(function(response) {
console.log(response);
return response.tags;
});
// Example 2: Use gapi.client.request(args) function
var request = gapi.client.request({
'method': 'GET',
'path': '/tagmanager/v1/accounts/HIDDENONPURPOSE/containers/HIDDENONPURPOSE/triggers',
});
// Execute the API request.
request.execute(function(response) {
console.log(response);
return response.triggers;
});
// Example 2: Use gapi.client.request(args) function
var request = gapi.client.request({
'method': 'GET',
'path': '/tagmanager/v1/accounts/HIDDENONPURPOSE/containers/HIDDENONPURPOSE/variables',
});
// Execute the API request.
request.execute(function(response) {
console.log(response);
return response.variables;
});
$("#example-table").tabulator({
columns:[
{title:"Tag Name", field:"name", headerSort:true, width:350},
{title:"Track Type", field:"parameter.3.value", headerSort:false, formatter:function(cell, formatterParams){
var value = cell.getValue();
if (value == "TRACK_EVENT") {
return "Event";
} else if (value == null) {
return "Page View";
} else {
return value;
}
}},
{title:"Event Category", field:"parameter.2.value", headerSort:false, formatter:function(cell, formatterParams){
var value = cell.getValue();
if (value == "{{GA Tracking Variable - Connect}}") {
return "";
} else {
return value;
}
}},
{title:"Event Action", field:"parameter.5.value", headerSort:false},
{title:"Event Label", field:"parameter.6.value", headerSort:false},
{title:"Non-Interaction Hit", field:"parameter.0.value", headerSort:false, formatter:function(cell, formatterParams){
var value = cell.getValue();
if (value == "false") {
return "False";
} else {
return value;
}
}},
{title:"Tag Type", field:"type", headerSort:false, formatter:function(cell, formatterParams){
var value = cell.getValue();
if (value == "ua") {
return "Universal Analytics";
} else {
return value;
}
}},
{title:"Override GA Settings", field:"parameter.1.value", headerSort:false, formatter:function(cell, formatterParams){
var value = cell.getValue();
if (value == "false") {
return "False";
} else if (value == "TRACK_PAGEVIEW") {
return "Track Page View";
} else {
return value;
}
}},
{title:"Tag Firing Options", field:"tagFiringOption", headerSort:false, formatter:function(cell, formatterParams){
var value = cell.getValue();
if (value == "oncePerEvent") {
return "Once Per Event";
} else {
return value;
}
}},
{title:"Associated Trigger", field:"firingTriggerId.0", headerSort:true, formatter:function(cell, formatterParams){
var value = cell.getValue();
if (value == "2147479553") {
return "";
} else {
return value;
}
}},
],
});
$("#example-table2").tabulator({
columns:[
{title:"Trigger Name", field:"name", headerSort:true, width:350},
{title:"Trigger Type", field:"type", headerSort:false, formatter:function(cell, formatterParams){
var value = cell.getValue();
if (value == "linkClick") {
return "link click";
} else {
return value;
}
}},
{title:"Element", field:"filter.0.parameter.0.value", headerSort:false},
{title:"Element Status", field:"filter.0.type", headerSort:false, formatter:function(cell, formatterParams){
var value = cell.getValue();
if (value == "startsWith") {
return "starts with";
} else if (value == "cssSelector") {
return "matches css selector";
} else {
return value;
}
}},
{title:"Element Value", field:"filter.0.parameter.1.value", headerSort:false},
{title:"Element 2", field:"filter.1.parameter.0.value", headerSort:false},
{title:"Element Status 2", field:"filter.1.type", headerSort:false},
{title:"Element Value 2", field:"filter.1.parameter.1.value", headerSort:false},
{title:"Trigger Id", field:"triggerId", headerSort:true},
],
});
$("#example-table3").tabulator({
columns:[
{title:"Variable Name", field:"name", headerSort:true, width:350},
{title:"Variable Type", field:"type", headerSort:false, formatter:function(cell, formatterParams){
var value = cell.getValue();
if (value == "d") {
return "DOM Element";
} else if (value == "v") {
return "Data Layer Variable";
} else if (value == "j") {
return "JavaScript Variable";
} else if (value == "jsm") {
return "Custom JavaScript";
} else if (value == "gas") {
return "Google Analytics Settings";
} else if (value == "u") {
return "URL";
} else {
return value;
}
}},
],
});
} else {
$('#sign-in-or-out-button').html('Sign In/Authorize');
$('#revoke-access-button').css('display', 'none');
$('#auth-status').html('You have not authorized this app or you are ' +
'signed out.');
}
}
function updateSigninStatus(isSignedIn) {
setSigninStatus();
}
</script>
<button id="sign-in-or-out-button"
style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
style="display: none; margin-left: 25px">Revoke access</button>
<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<img src="images/logo.png" alt="Logo">
</div>
</div>
<div class="row row1">
<div class="col">
<h1>SDR</h1>
</div>
</div>
<div class="row row2">
<div class="col">
<h2>Tags</h2>
</div>
</div>
<div class="row row3">
<div class="col">
<div id="example-table"></div>
</div>
</div>
<div class="row row4">
<div class="col">
<h2>Triggers</h2>
</div>
</div>
<div class="row row5">
<div class="col">
<div id="example-table2"></div>
</div>
</div>
<div class="row row6">
<div class="col">
<h2>Variables</h2>
</div>
</div>
<div class="row row7">
<div class="col">
<div id="example-table3"></div>
</div>
</div>
</div>
</body>
<script>
</script>
