GTM API 调用制表器

问题描述 投票：0回答：1

您好，我正在尝试在制表器中使用来自谷歌标签管理器的数据。我已经拉入了对象，并且可以通过查看控制台来验证它，但我不知道如何像通常使用 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>

As you can see the 3 objects I called are there but tabulator isn't being recognized.

function output response jsobject tabulator
1个回答
0
投票

我需要补充：

$("#example-table2").tabulator("setData", response.triggers);

进入：

request.execute(function(response) {
  console.log(response);  
});

以便数据在请求期间加载。我在外面调用它。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.