Question

我正在尝试为Nuxt构建一个Google Analytics（分析）插件，该插件将从CMS中获取跟踪ID。我想我真的很亲密。

我仅在客户端加载插件文件。该插件是通过`timescale 1ns / 1ps module SevenSeg_Controller( //Inputs input disp_en, input clk, input [15:0]data, output reg [3:0]anode, output reg [7:0]cathode ); wire [1:0]anode_refresh_count; reg [3:0]digit_data; //Anode refresher (A 2-bit counter) anode_refresher Anode_Refresh_Counter ( .clk(clk), .rst(rst), .count(anode_refresh_count) ); //Anode selector (Decodes anode count to drive specified anode on display) always @(anode_refresh_count) begin case (anode_refresh_count) 4'b00: anode = ~4'b0001; 4'b01: anode = ~4'b0010; 4'b10: anode = ~4'b0100; 4'b11: anode = ~4'b1000; default: anode = ~4'b0001; endcase end //Data multiplexer (Selects which section of the data_in bus to display to the 7-seg always @(anode_refresh_count) begin case(anode_refresh_count) 4'b00: digit_data = [3]data; 4'b01: digit_data = [7:4]data; 4'b10: digit_data = [3:0]data; 4'b11: digit_data = [3:0]data; default: digit_data = [3:0]data; endcase end //Decodes the digit_data and sets the cathodes accordingly always @(digit_data) case (digit_data) 4'd0: cathode = ~7'b00111111;//Zero 4'd1: cathode = ~7'b00000110;//One 4'd2: cathode = ~7'b01011011;//Two 4'd3: cathode = ~7'b01001111;//Three 4'd4: cathode = ~7'b01100110;//Four 4'd5: cathode = ~7'b01101101;//Five 4'd6: cathode = ~7'b01111101;//Six 4'd7: cathode = ~7'b00000111;//Seven 4'd8: cathode = ~7'b01111111;//Eight 4'd9: cathode = ~7'b01100111;//Nine default: cathode = ~7'b00111111;//Default Zero endcase endmodule数组从nuxt.config.js加载的。

从那里开始，主要的问题是gtag脚本的URL中需要UA代码，因此我不能仅仅将其添加到plugins:[{ src: '~/plugins/google-gtag.js', mode: 'client' }]中的常规脚本对象中。我需要从商店中获取这些UA代码（以nuxt.config.js的形式水化。

因此，我在插件中使用nuxtServerInit在URL中添加了带有UA代码的gtag脚本。但这并不会导致在第一次页面加载时添加脚本，但是会在所有后续页面转换中添加脚本。很明显，我在页面渲染中运行head.script.push太晚了。

但是我不知道如何获取跟踪ID，然后将脚本添加到头部。

head.script.push

Answer 1

我最终使它开始工作，我们在production here中使用了它。

撰写本文时的代码如下：

export default ({ store, app: { router, context } }, inject) => {
    // Remove any empty tracking codes
    let codes = _get(store, "state.siteMeta.gaTrackingCodes", [])
    codes = codes.filter(Boolean)

    // Abort if no codes
    if (!codes.length) {
        if (context.isDev) console.log("No Google Anlaytics tracking codes set")
        inject("gtag", () => {})
        return
    }

    // Abort if in Dev mode, but inject dummy functions so $gtag events don't throw errors
    if (context.isDev) {
        console.log("No Google Anlaytics tracking becuase your are in Dev mode")
        inject("gtag", () => {})
        return
    }

    // Abort if we already added script to head
    let gtagScript = document.getElementById("gtag")
    if (gtagScript) {
        return
    }

    // Add script tag to head
    let script = document.createElement("script")
    script.async = true
    script.id = "gtag"
    script.src = "//www.googletagmanager.com/gtag/js"
    document.head.appendChild(script)

    // Include Google gtag code and inject it (so this.$gtag works in pages/components)
    window.dataLayer = window.dataLayer || []
    function gtag() {
        dataLayer.push(arguments)
    }
    inject("gtag", gtag)
    gtag("js", new Date())

    // Add tracking codes from Vuex store
    codes.forEach(code => {
        gtag("config", code, {
            send_page_view: false // Necessary to avoid duplicated page track on first page load
        })

        // After each router transition, log page event to Google for each code
        router.afterEach(to => {
            gtag("config", code, { page_path: to.fullPath })
        })
    })
}

如果未安装在插件中，则可以很好地了解如何加载第三方脚本：https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/

Nuxt：在插件内部，如何在头部添加动态脚本标签？

1 个答案: