Featured image of post Google Analytics से लोकप्रिय पेज रैंकिंग प्राप्त करके प्रदर्शित करने का तरीका

Google Analytics से लोकप्रिय पेज रैंकिंग प्राप्त करके प्रदर्शित करने का तरीका

परिचय

Ranklet नामक सेवा का उपयोग करके, आप Google Analytics से लोकप्रिय पेज रैंकिंग प्राप्त करके आसानी से प्रदर्शित कर सकते हैं।

इस लेख में, मैं HUGO ब्लॉग में इसे प्रदर्शित करने का तरीका बताऊंगा।

डेमो छवि

img_1.png

तैयारी

  • साइट पर Google Analytics सेटअप होना चाहिए

चरण

  1. Ranklet पर जाएं
  2. Sign in with Google पर क्लिक करें और Google खाते से लॉग इन करें (यह Google Analytics खाते से जुड़ा होना चाहिए) img_2.png

अनुमति दें पर क्लिक करें

  1. बुनियादी जानकारी सेट करें

img_3.png मैंने इसे ऊपर दिखाए अनुसार कॉन्फ़िगर किया।

  • Google Analytics View में वह व्यू चुनें जिससे आप रैंकिंग प्राप्त करना चाहते हैं।
  1. टेक्स्ट प्रतिस्थापन सेट करें

img_4.png मैंने इसे ऊपर दिखाए अनुसार सेट किया। पेज शीर्षक से | kenji.blog को हटाने के लिए इसे सेट किया गया है।

  1. टेम्प्लेट सेट करें
  • HTML (रैंकिंग संख्या को छिपा दिया गया है)
 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
<div class="ranklet ranklet-reset">
    <table class="ranklet-table">
        <tbody class="ranklet-pages">
            {{#context.pages}}
            <tr class="ranklet-page">
                <td class="ranklet-image">
                    {{#image}}
                    <a href="{{url}}" class="ranklet-link">
                        <img class="ranklet-img" src="{{image}}" />
                    </a>
                    {{/image}}
                </td>
                <td class="ranklet-meta">
                    <div class="ranklet-title">
                        <a href="{{url}}" class="ranklet-link">
                            {{title}}
                        </a>
                    </div>
                    {{#description}}
                    <div class="ranklet-description">
                        <a href="{{url}}" class="ranklet-link">
                            {{description}}
                        </a>
                    </div>
                    {{/description}}
                </td>
            </tr>
            {{/context.pages}}
        </tbody>
    </table>
</div>
  • CSS (फ़ॉन्ट आकार बदला और विवरण को 3 पंक्तियों में प्रदर्शित करने के लिए सेट किया)
 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
#ranklet-{{context.id}} {
    .ranklet-reset { // रीसेट
        table, tr, td, div, span {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
            line-height: 1;
            box-sizing: border-box;
        }
    }

    .ranklet-table {
        border-collapse: separate;
        border-spacing: 8px 24px;
        width: 100%;
        word-break: break-all;

        td {
            vertical-align: middle;
        }

        .ranklet-rank {
            text-align: center;
            font-size: 120%;
        }

        .ranklet-image {
            text-align: center;
            img {
                max-width: 128px;
                max-height: 128px;
            }
        }

        .ranklet-meta {
            .ranklet-title {
                font-size: 20px;
                line-height: 125%;
            }

            .ranklet-description {
                font-size: 16px;
                margin-top: 8px;
                line-height: 125%;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3; /* पंक्तियों की संख्या */
            }
        }
    }
}
  • JavaScript में कोई बदलाव नहीं
  1. “साइट पर प्रकाशित करें” से HTML कॉपी करें

img_5.png

प्रदर्शित HTML को कॉपी करें

  1. HUGO टेम्प्लेट में पेस्ट करें
  • layouts/partials/ranklet.html बनाएं और कॉपी किए गए HTML को पेस्ट करें
1
<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>
  • layouts/_default/single.html में </footer> से पहले वाली पंक्ति पर नीचे दिया गया कोड पेस्ट करें
1
{{- partial "ranklet.html" . }}

बस इतना ही। अब रैंकिंग इस पेज के नीचे दिखाए अनुसार प्रदर्शित होगी।

comments powered by Disqus
निर्मित Hugo के साथ
थीम Stack द्वारा डिज़ाइन किया गया Jimmy